百度地圖Api詳解之地圖標註

標註概述

標註（Marker）是用來表示一個點位置的可見元素，每一個標註自身都包含地理信息。好比你在西單商場位置添加了一個標註，不論地圖移動、縮放，標註都會跟隨一塊兒移動，保證其始終指向正確的地理位置。

從上面的圖能夠看出，不論地圖如何變化標註始終指向「西單商場」的位置。

如何知道某個點的座標？

上例中咱們在西單商場位置添加了一個標註，那麼我是如何知道它的座標點呢？能夠經過API的事件機制來獲取：

map.addEventListener('click', function(e){
    console.log(e.point);
});

咱們在map對象上添加了一個click事件的監聽函數，當點擊地圖上某個位置時，監聽函數經過控制檯把當前點擊的位置輸出出來（注意須要有控制檯的支持，好比firebug，若是沒有控制檯則可以使用alert把point的lng和lat屬性輸出出來）。此外，你也可使用API提供的座標拾取工具來完成（http://dev.baidu.com/wiki/static/map/API/tool/getPoint/），它支持檢索而且點擊地圖上任意位置時會出現該位置的座標。

標註元素組成

從DOM元素構成角度看，一個完整的標註是由如下幾個部分組成的：

• 標註點擊區域
• 標註圖標
• 標註陰影

下面是示意圖：

在地圖API實現中，這三個DOM元素分別位於不一樣的容器中，這些容器能夠經過map.getPanes()方法得到，其中markerMouseTarget就是標註點擊區域所在容器、markerPane爲標註圖標所在容器，markerShadow爲標註陰影所在圖層。你可能會在自定義覆蓋物時須要這些容器對象，這裏只須要知道Marker的各個部分是如何放置的便可。

自定義標註圖標

標註的圖標是能夠自定義的，經過Icon類能夠自定義標註的圖標，好比我但願使用下面這個圖片做爲標註圖標：

已知這個圖標大小爲20x32。咱們初始化地圖，接着定義Icon，並賦給一個Marker實例：

var map =new BMap.Map('container');
map.centerAndZoom(new BMap.Point(116.380797, 39.918497), 18);

var icon = new BMap.Icon('pin.png', new BMap.Size(20, 32), {
    anchor: new BMap.Size(10, 30)
});

var mkr =new BMap.Marker(new BMap.Point(116.38075,39.918986), {
    icon: icon
});

map.addOverlay(mkr);

咱們給定icon所需圖片的url，接着是圖片的尺寸，另外咱們還增長了anchor屬性，這個是幹什麼用的呢？在自定義標註圖標時有一點須要注意的就是標註的定位點（anchor），通俗的講就是要指定圖片的哪一個位置是與標註真正的位置對應在一塊兒。咱們經過下面的圖示來講明：

咱們獲取到地圖上一個位置（上圖中標註下端所在的黑色小方塊），那麼我也但願我標註中間下端指向這個位置，這個就須要經過anchor來調節。anchor的意義以下圖所示：

即定位點距離圖片左上角的偏移量。

若是不給anchor的話，API會自動獲取圖片中心點做爲anchor位置：

咱們看到標註圖片中心的位置覆蓋在那個小方塊區域。

除了anchor以外，還有一個infoWindowAnchor屬性，它是用來控制信息窗口開啓的位置的（注意這裏調用的是Marker的openInfoWindow方法，而不是Map的openInfoWindow方法），默認狀況下它和icon的anchor是一個位置：

標註被InfoWindow的底角擋住了，經過infoWindowAnchor屬性就能夠改變開啓位置：

var icon =new BMap.Icon('pin.png', new BMap.Size(20, 32), {
    anchor: new BMap.Size(10, 30),
    infoWindowAnchor: new BMap.Size(10, 0)
})

再看看效果：

尖角位置已經發生了改變。

標註拖拽

標註支持拖拽，而且能夠配置是否有動畫效果，咱們修改建立標註的代碼：

var mkr =new BMap.Marker(new BMap.Point(116.38075,39.918986), {
    icon: icon,
    enableDragging: true,
    raiseOnDrag: true
});

這裏開啓了拖拽功能以及響應的動畫效果。若是此時拖拽地圖你會獲得以下效果：

經過監聽標註的dragend事件，你能夠知道拖拽結束後標註的地理位置：

mkr.addEventListener('dragend', function(e){
    alert(e.point.lng +', '+ e.point.lat);
　　this.openInfoWindow(new BMap.InfoWindow('很好'));
})

標註陰影

爲了增長立體感，能夠單獨給標註添加陰影，固然你也能夠把陰影直接畫在icon所用的圖片上，可是因爲陰影和標註自己在一塊兒，因此就不建議使用任何動畫效果，不然會缺少真實感。陰影能夠經過MarkerOptions的shadow屬性配置，類型也是一個Icon實例。具體使用方法和icon屬性同樣，這裏就不贅述了。