百度地圖api怎么自定義地圖 百度地圖api自定義地圖教程。百度地圖api是一款面向開發(fā)者的百度地圖服務(wù)的應(yīng)用接口,可以使用javascript api ,web服務(wù)api,安卓sdk等開發(fā)工具進(jìn)行開發(fā)。功能也十分多樣,下面小編就給大家分享下百度地圖api自定義地圖的教程,希望各位喜歡。
標(biāo)注概述
標(biāo)注(Marker)是用來表示一個(gè)點(diǎn)位置的可見元素,每個(gè)標(biāo)注自身都包含地理信息。比如你在西單商場位置添加了一個(gè)標(biāo)注,不論地圖移動、縮放,標(biāo)注都會跟隨一起移動,保證其始終指向正確的地理位置。
從上面的圖可以看出,不論地圖如何變化標(biāo)注始終指向“西單商場”的位置。
如何知道某個(gè)點(diǎn)的坐標(biāo)?
上例中我們在西單商場位置添加了一個(gè)標(biāo)注,那么我是如何知道它的坐標(biāo)點(diǎn)呢?可以通過API的事件機(jī)制來獲取:
map.addEventListener('click', function(e){
console.log(e.point);
});
我們在map對象上添加了一個(gè)click事件的監(jiān)聽函數(shù),當(dāng)點(diǎn)擊地圖上某個(gè)位置時(shí),監(jiān)聽函數(shù)通過控制臺把當(dāng)前點(diǎn)擊的位置輸出出來(注意需要有控制臺的支持,比如firebug,如果沒有控制臺則可使用alert把point的lng和lat屬性輸出出來)。此外,你也可以使用API提供的坐標(biāo)拾取工具來完成(http://dev.baidu.com/wiki/static/map/API/tool/getPoint/),它支持檢索并且點(diǎn)擊地圖上任意位置時(shí)會出現(xiàn)該位置的坐標(biāo)。
標(biāo)注元素組成
從DOM元素構(gòu)成角度看,一個(gè)完整的標(biāo)注是由以下幾個(gè)部分組成的:
標(biāo)注點(diǎn)擊區(qū)域
標(biāo)注圖標(biāo)
標(biāo)注陰影
下面是示意圖:
在地圖API實(shí)現(xiàn)中,這三個(gè)DOM元素分別位于不同的容器中,這些容器可以通過map.getPanes()方法獲得,其中markerMouseTarget就是標(biāo)注點(diǎn)擊區(qū)域所在容器、markerPane為標(biāo)注圖標(biāo)所在容器,markerShadow為標(biāo)注陰影所在圖層。你可能會在自定義覆蓋物時(shí)需要這些容器對象,這里只需要知道Marker的各個(gè)部分是如何放置的即可。
自定義標(biāo)注圖標(biāo)
標(biāo)注的圖標(biāo)是可以自定義的,通過Icon類可以自定義標(biāo)注的圖標(biāo),比如我希望使用下面這個(gè)圖片作為標(biāo)注圖標(biāo):
已知這個(gè)圖標(biāo)大小為20x32。我們初始化地圖,接著定義Icon,并賦給一個(gè)Marker實(shí)例:
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屬性,這個(gè)是干什么用的呢?在自定義標(biāo)注圖標(biāo)時(shí)有一點(diǎn)需要注意的就是標(biāo)注的定位點(diǎn)(anchor),通俗的講就是要指定圖片的哪個(gè)位置是與標(biāo)注真正的位置對應(yīng)在一起。我們通過下面的圖示來說明:
我們獲取到地圖上一個(gè)位置(上圖中標(biāo)注下端所在的黑色小方塊),那么我也希望我標(biāo)注中間下端指向這個(gè)位置,這個(gè)就需要通過anchor來調(diào)節(jié)。anchor的意義如下圖所示:
即定位點(diǎn)距離圖片左上角的偏移量。
如果不給anchor的話,API會自動獲取圖片中心點(diǎn)作為anchor位置:
我們看到標(biāo)注圖片中心的位置覆蓋在那個(gè)小方塊區(qū)域。
除了anchor之外,還有一個(gè)infoWindowAnchor屬性,它是用來控制信息窗口開啟的位置的(注意這里調(diào)用的是Marker的openInfoWindow方法,而不是Map的openInfoWindow方法),默認(rèn)情況下它和icon的anchor是一個(gè)位置:
標(biāo)注被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)
})
再看看效果:
尖角位置已經(jīng)發(fā)生了改變。
標(biāo)注拖拽
標(biāo)注支持拖拽,并且可以配置是否有動畫效果,我們修改創(chuàng)建標(biāo)注的代碼:
var mkr = new BMap.Marker(new BMap.Point(116.38075,39.918986), {
icon: icon,
enableDragging: true,
raiseOnDrag: true
});
這里開啟了拖拽功能以及響應(yīng)的動畫效果。如果此時(shí)拖拽地圖你會得到如下效果:
通過監(jiān)聽標(biāo)注的dragend事件,你可以知道拖拽結(jié)束后標(biāo)注的地理位置:
mkr.addEventListener('dragend', function(e){
alert(e.point.lng + ', ' + e.point.lat);
})
標(biāo)注陰影
為了增加立體感,可以單獨(dú)給標(biāo)注添加陰影,當(dāng)然你也可以把陰影直接畫在icon所用的圖片上,但是由于陰影和標(biāo)注本身在一起,所以就不建議使用任何動畫效果,否則會缺乏真實(shí)感。陰影可以通過MarkerOptions的shadow屬性配置,類型也是一個(gè)Icon實(shí)例。具體使用方法和icon屬性一樣,這里就不贅述了。
以上就是給大家?guī)淼陌俣鹊貓Dapi自定義地圖的相關(guān)教程,希望各位喜歡制作地圖的朋友可以嘗試下,還是蠻好玩的。
新聞熱點(diǎn)
疑難解答