基於百度地圖的 JS API 示例學習
最近在做和地圖相關的項目，需要在 C# 編寫的桌面應用中嵌入在線地圖。我首先嘗試了百度地圖提供的 JavaScript API，大致了解它的實現過程，這是一個小的示例。
首先要去百度開發者平台申請一個 Key，實際上根據我的個人體驗，不用密鑰也可以使用，只不過是 1.4 版。目前最新是 2.0。開始的創建地圖都很簡單，還可以添加標注點以及鼠標點擊事件。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
#r-result{height:100%;width:20%;float:left;}
</style>
<!-- 百度地圖v1.4可不用密鑰 src="http://api.map.baidu.com/api?v=1.4"-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你自己的密鑰"></script>
<title>百度地圖的Hello, World</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("allmap"); // 創建Map實例
var point = new BMap.Point(108.771672, 34.039175); // 創建點坐標
map.centerAndZoom(point,18); // 初始化地圖,設置中心點坐標和地圖級別。
map.enableScrollWheelZoom(); //啟用滾輪放大縮小
var marker1 = new BMap.Marker(new BMap.Point(108.771672, 34.039175)); // 創建標注
map.addOverlay(marker1); // 將標注添加到地圖中
marker1.setAnimation(BMAP_ANIMATION_BOUNCE); //跳動的動畫
var infoWindow1 = new BMap.InfoWindow("協同感知中心地點"); //給標注添加信息框
//給mark添加鼠標單擊事件
marker1.addEventListener("click", function () { this.openInfoWindow(infoWindow1); });
//編寫自定義函數添加工作者標注
function addMarker(point, i) {
//百度默認的標注是個紅色氣球，可以給它換圖標：
var myIcon = new BMap.Icon("./red_dot.png", new BMap.Size(20, 20), { anchor: new BMap.Size(10, 10) });//自己要添加的路徑
var marker2 = new BMap.Marker(point, { icon: myIcon }); // 創建標注
map.addOverlay(marker2); // 將標注添加到地圖中
//最后為信息框加入點擊鼠標事件：
var infoWindow2 = new BMap.InfoWindow("<p style='font-size:12px;'>工作者"+ i +"</p>");
marker2.addEventListener("click", function () { this.openInfoWindow(infoWindow2); });
}
// 隨機向地圖添加25個標注
var bounds = map.getBounds();
var sw = bounds.getSouthWest();
var ne = bounds.getNorthEast();
var lngSpan = Math.abs(sw.lng - ne.lng);
var latSpan = Math.abs(ne.lat - sw.lat);
for (var i = 0; i < 15; i++) {
var point = new BMap.Point(sw.lng + lngSpan * (Math.random() ), ne.lat - latSpan * (Math.random() ));
addMarker(point, i);
}
</script>
我遇到的一個小問題是，更換了標注點的圖標之后，放大縮小地圖會導致標記點漂移。查了官方類的說明，但是很簡略。我多次測試之后才明白問題出現在這兩個參數上：
var myIcon = new BMap.Icon("./red_dot.png", new BMap.Size(20, 20), { anchor: new BMap.Size(10, 10) });
這里 { anchor: new BMap.Size(10, 10) }可以調整設置到圖標的中心，這樣再去放大縮小地圖就不會出現圖標移位的狀況。