一、簡介
所有疊加或覆蓋到地圖的內容,我們統稱為地圖覆蓋物。如標注、矢量圖形元素(包括:折線和多邊形和圓)、信息窗口等。覆蓋物擁有自己的地理坐標,當您拖動或縮放地圖時,它們會相應的移動。
地圖API提供了如下幾種覆蓋物:
Marker:標注表示地圖上的點,可自定義標注的圖標。
Label:表示地圖上的文本標注,您可以自定義標注的文本內容。
可以使用map.addOverlay方法向地圖添加覆蓋物,使用map.removeOverlay方法移除覆蓋物,注意此方法不適用於InfoWindow。
二、添加簡單標注
標注表示地圖上的點。API提供了默認圖標樣式,您也可以通過Icon類來指定自定義圖標。Marker的構造函數的參數為Point和 MarkerOptions(可選)。注意:當您使用自定義圖標時,標注的地理坐標點將位於標注所用圖標的中心位置,您可通過Icon的offset屬性 修改標定位置。
下面的示例向地圖中心點添加了一個標注,並使用默認的標注樣式。
var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point); // 創建標注
map.addOverlay(marker); // 將標注添加到地圖中
可以通過設置標注是跳動的
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳動的動畫
三、自定義標注圖標
通過Icon類可實現自定義標注的圖標,下面示例通過參數MarkerOptions的icon屬性進行設置,您也可以使用marker.setIcon()方法。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"></script> <title>設置點的新圖標</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地圖API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); //創建小狐狸 var pt = new BMap.Point(116.417, 39.909); var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif", new BMap.Size(300,157)); //定義自己的標注 var marker2 = new BMap.Marker(pt,{icon:myIcon}); // 創建標注 map.addOverlay(marker2); // 將標注添加到地圖中 </script>
四、可托拽的標注
marker的enableDragging和disableDragging方法可用來開啟和關閉標注的拖拽功能。默認情況下標注不支持拖拽,您需要調 用marker.enableDragging()方法來開啟拖拽功能。在標注開啟拖拽功能后,您可以監聽標注的dragend事件來捕獲拖拽后標注的最 新位置。
marker.enableDragging(); //設置其可拖拽
marker.addEventListener("dragend", function(e){
alert("當前位置:" + e.point.lng + ", " + e.point.lat);
})
五、內存釋放
在API 1.0版本中,如果您需要在地圖中反復添加大量的標注,這可能會占用較多的內存資源。如果您的標注在移除后不再使用,可調用 Overlay.dispose()方法來釋放內存。注意在1.0版本中,調用此方法后標注將不能再次添加到地圖上。自1.1版本開始,您不在需要使用此 方法來釋放內存資源,API會自動幫助您完成此工作。
例如,您可以在標注被移除后調用此方法:
map.removeOverlay(marker);
marker.dispose(); // 1.1 版本不需要這樣調用
ps:最基礎知識可看:http://www.cnblogs.com/0201zcr/p/4679444.html ,感謝您的耐心閱讀!