百度地圖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)注自身都包含地理信息。比如你在西單商場(chǎng)位置添加了一個(gè)標(biāo)注，不論地圖移動(dòng)、縮放，標(biāo)注都會(huì)跟隨一起移動(dòng)，保證其始終指向正確的地理位置。

　　從上面的圖可以看出，不論地圖如何變化標(biāo)注始終指向“西單商場(chǎng)”的位置。

　　如何知道某個(gè)點(diǎn)的坐標(biāo)？

　　上例中我們?cè)谖鲉紊虉?chǎng)位置添加了一個(gè)標(biāo)注，那么我是如何知道它的坐標(biāo)點(diǎn)呢？可以通過API的事件機(jī)制來獲取：

　　map.addEventListener（'click', function（e）{

　　console.log（e.point）；

　　}）；

　　我們?cè)趍ap對(duì)象上添加了一個(gè)click事件的監(jiān)聽函數(shù)，當(dāng)點(diǎn)擊地圖上某個(gè)位置時(shí)，監(jiān)聽函數(shù)通過控制臺(tái)把當(dāng)前點(diǎn)擊的位置輸出出來（注意需要有控制臺(tái)的支持，比如firebug，如果沒有控制臺(tái)則可使用alert把point的lng和lat屬性輸出出來）。此外，你也可以使用API提供的坐標(biāo)拾取工具來完成（http://dev.baidu.com/wiki/static/map/API/tool/getPoint/），它支持檢索并且點(diǎn)擊地圖上任意位置時(shí)會(huì)出現(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)注陰影所在圖層。你可能會(huì)在自定義覆蓋物時(shí)需要這些容器對(duì)象，這里只需要知道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)注真正的位置對(duì)應(yīng)在一起。我們通過下面的圖示來說明：

　　我們獲取到地圖上一個(gè)位置（上圖中標(biāo)注下端所在的黑色小方塊），那么我也希望我標(biāo)注中間下端指向這個(gè)位置，這個(gè)就需要通過anchor來調(diào)節(jié)。anchor的意義如下圖所示：

　　即定位點(diǎn)距離圖片左上角的偏移量。

　　如果不給anchor的話，API會(huì)自動(dòng)獲取圖片中心點(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)注支持拖拽，并且可以配置是否有動(dòng)畫效果，我們修改創(chuàng)建標(biāo)注的代碼：

　　var mkr = new BMap.Marker（new BMap.Point（116.38075,39.918986）， {

　　icon: icon,

　　enableDragging: true,

　　raiseOnDrag: true

　　}）；

　　這里開啟了拖拽功能以及響應(yīng)的動(dòng)畫效果。如果此時(shí)拖拽地圖你會(huì)得到如下效果：

　　通過監(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)注本身在一起，所以就不建議使用任何動(dòng)畫效果，否則會(huì)缺乏真實(shí)感。陰影可以通過MarkerOptions的shadow屬性配置，類型也是一個(gè)Icon實(shí)例。具體使用方法和icon屬性一樣，這里就不贅述了。

　　以上就是給大家?guī)淼陌俣鹊貓Dapi自定義地圖的相關(guān)教程，希望各位喜歡制作地圖的朋友可以嘗試下，還是蠻好玩的。