在《C#的百度地圖開發(三)依據坐標獲取位置、商圈及周邊信息》中已經得到坐標的位置信息，有了這些定位信息，那要如何在前端的頁面上顯示出來呢？這需要用到百度地圖的JavaScript的API。下面是示例代碼。
前端代碼
<%@ Page Language=C# AutoEventWireup=true CodeBehind=ViewMap.aspx.cs Inherits=TEST.ViewMap %>
(1).script中http://api.map.baidu.com後面的ak是申請的key，與前面文章中所說的key一致。
(2).引用了jquery的庫。
(3).如果還引用了jquery.mobile的庫，以適應移動端使用的，記得要將div設置相應的高度和寬度，不然可能會顯示一片空白。因為jquery.mobile在渲染時會對頁面進行適配的處理。
(4).載入地圖的部分封裝到了map.js中，其代碼如下
var MapApi = (function () {
return {
LoadLocationMap: function (lat, lng, containerId, showText) {
///載入地圖
///緯度值
///經度值
///地圖容器ID,一般為Div的Id.
var map = new BMap.Map(containerId); // 創建Map實例
var point = new BMap.Point(lng, lat); // 創建點坐標
var marker = new BMap.Marker(point); // 創建標注
map.addOverlay(marker); // 將標注添加到地圖中
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(); //啟用滾輪放大縮小
var opts = {
width: 50, // 信息窗口寬度
height: 30, // 信息窗口高度
title: showText, // 信息窗口標題
enableMessage: false,//設置允許信息窗發送短息
message: showText
}
var infoWindow = new BMap.InfoWindow(, opts); // 創建信息窗口對象
map.openInfoWindow(infoWindow, point); //開啟信息窗口
},
LoadMap: function (lat, lng, panoramaContainerId, normalMapContainerId) {
//全景圖展示
var panorama = new BMap.Panorama(panoramaContainerId);
panorama.setPosition(new BMap.Point(lng, lat)); //根據經緯度坐標展示全景圖
panorama.setPov({ heading: -40, pitch: 6 });
panorama.addEventListener('position_changed', function (e) { //全景圖位置改變後，普通地圖中心點也隨之改變
var pos = panorama.getPosition();
map.setCenter(new BMap.Point(pos.lng, pos.lat));
marker.setPosition(pos);
});
//普通地圖展示
var mapOption = {
mapType: BMAP_NORMAL_MAP,
maxZoom: 18,
drawMargin: 0,
enableFulltimeSpotClick: true,
enableHighResolution: true
}
var map = new BMap.Map(normalMapContainerId, mapOption);
var testpoint = new BMap.Point(lng, lat);
map.centerAndZoom(testpoint, 18);
var marker = new BMap.Marker(testpoint);
marker.enableDragging();
map.addOverlay(marker);
marker.addEventListener('dragend', function (e) {
panorama.setPosition(e.point); //拖動marker後，全景圖位置也隨著改變
panorama.setPov({ heading: -40, pitch: 6 });
});
}
}
})();
注：該JS中還封裝了全景圖的函數。
下面看一下後端代碼
public partial class ViewMap : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
InitLoad();
}
}
private void InitLoad()
{
Coordinate coordinate = new Coordinate(39.92, 116.46);
CoordLocationResult coordLocationResult = BaiduMap.FetchLocation(coordinate);
HiddenAddress.Value = coordLocationResult.result.formatted_address;
HiddenCoord.Value = String.Format({0},{1},
coordLocationResult.result.location.lat,
coordLocationResult.result.location.lng);
}
}
注:
(1).通過BaiduMap.FetchLocation得到坐標的定位信息。
(2).將得到的地址和坐標賦值到隱藏域中，以便前端使用JS來讀取。
測試結果如下圖
這樣就實現了坐標的前端定位。當然如果有需要，還可以將某段時間內獲取的坐標點在地圖上畫出軌跡來，這個可以參考百度地圖的說明。
這是通過坐標來定位的，而坐標的定位一般都是在移動設備上，那如果在PC端呢？這個就需要使用到IP定位，具體請參看後文《 C#的百度地圖開發(五)IP定位》。
