百度地圖API的使用方法

1、百度地圖API的使用方法百度地圖API開始學(xué)習(xí)百度地圖API最簡單的方式是看一個簡單的示例。以下代碼創(chuàng)建了一個520x340大小的地圖區(qū)域并以天安門作為地圖的中心:.Hello,World.2.Hello,World1.2.varmap=newBMap.Map(container);/創(chuàng)建地圖實例3.varpoint=newBMap.Point(116.404,39.915);/創(chuàng)建點坐標(biāo)4.map.centerAndZoom(point,15);/初始化地圖，設(shè)置中心點坐標(biāo)和地圖級別5.6.varmap=newBMap.Map(container

2、);/創(chuàng)建地圖實例varpoint=newBMap.Point(116.404,39.915);/創(chuàng)建點坐標(biāo)map.centerAndZoom(point,15);/初始化地圖，設(shè)置中心點坐標(biāo)和地圖級別引用百度地圖API文件當(dāng)您引用地圖API文件時，需要使用自己申請的API密鑰。1.創(chuàng)建地圖容器元素1.地圖需要一個HTML元素作為容器，這樣才能展現(xiàn)到頁面上。這里我們創(chuàng)建了一個div元素并制定它的大小。地圖會根據(jù)容器大小調(diào)整自身尺寸。命名空間API使用BMap作為命名空間，所有類均在該命名空間之下，比如：BMap.Map、BMap.Control、BMap.Overlay。創(chuàng)建地圖實例1.var

3、map=newBMap.Map(container);varmap=newBMap.Map(container);位于BMap命名空間下的Map類表示地圖，通過new操作符可以創(chuàng)建一個地圖實例。其參數(shù)可以是元素id也可以是元素對象。注意在調(diào)用此構(gòu)造函數(shù)時應(yīng)確保容器元素已經(jīng)添加到地圖上。創(chuàng)建點坐標(biāo)1.varpoint=newBMap.Point(116.404,39.915);varpoint=newBMap.Point(116.404,39.915);這里我們使用BMap命名空間下的Point類來創(chuàng)建一個坐標(biāo)點。Point類描述了一個地理坐標(biāo)點，其中116.404表示經(jīng)度，39.915表示緯度

4、。地圖初始化1.map.centerAndZoom(point,15);map.centerAndZoom(point,15);在創(chuàng)建地圖實例后，我們需要對其進行初始化，BMap.Map.centerAndZoom()方法要求設(shè)置中心點坐標(biāo)和地圖級別。地圖必須經(jīng)過初始化才可以執(zhí)行其他操作。地圖操作地圖被實例化并完成初始化以后，就可以與其進行交互了。API中的地圖對象的外觀與行為與百度地圖網(wǎng)站上交互的地圖非常相似。它支持鼠標(biāo)拖拽、滾輪縮放、雙擊放大等交互功能。您也可以修改配置來改變這些功能。您還可以通過編程的方式與地圖交互。Map類提供了若干修改地圖狀態(tài)的方法。例如：setCenter()、pa

5、nTo()、zoomTo()等等。下面示例顯示一個地圖，等待兩秒鐘后，它會移動到新中心點。panTo()方法將讓地圖平滑移動至新中心點，如果移動距離超過了當(dāng)前地圖區(qū)域大小，則地圖會直跳到該點。1.varmap=newBMap.Map(container);2.varpoint=newBMap.Point(116.404,39.915);3.map.centerAndZoom(point,15);4.window.setTimeout(function()5.map.panTo(newBMap.Point(116.409,39.918);6.,2000);varmap=newBMap.Map(c

6、ontainer);varpoint=newBMap.Point(116.404,39.915);map.centerAndZoom(point,15);window.setTimeout(function()map.panTo(newBMap.Point(116.409,39.918);,2000);地圖控件概述百度地圖上負(fù)責(zé)與地圖交互的UI元素稱為控件。百度地圖API中提供了豐富的控件，您還可以通過BMap.Control來實現(xiàn)自定義控件。地圖API中提供的控件有：Control：控件的抽象基類，所有控件均繼承此類的方法、屬性。通過此類您可實現(xiàn)自定義控件。NavigationControl

7、：地圖平移縮放控件，默認(rèn)位于地圖左上方，它包含控制地圖的平移和縮放的功能。OverviewMapControl：縮略地圖控件，默認(rèn)位于地圖右下方，是一個可折疊的縮略地圖。ScaleControl：比例尺控件，默認(rèn)位于地圖左下方，顯示地圖的比例關(guān)系。CopyrightControl：版權(quán)控件，默認(rèn)位于地圖左下方。所有這些控件都基于BMap.Control類。向地圖添加控件可以使用BMap.Map.addControl()方法向地圖添加控件。在此之前地圖需要進行初始化。例如，要將標(biāo)準(zhǔn)地圖控件添加到地圖中，可在代碼中添加如下內(nèi)容：1.varmap=newBMap.Map(container);2.m

8、ap.centerAndZoom(newBMap.Point(116.404,39.915),11);3.map.addControl(newBMap.NavigationControl();varmap=newBMap.Map(container);map.centerAndZoom(newBMap.Point(116.404,39.915),11);map.addControl(newBMap.NavigationControl();可以向地圖添加多個控件。在本例中我們向地圖添加一個平移縮放控件、一個比例尺控件和一個縮略圖控件。在地圖中添加控件后，它們即刻生效。1.map.addContr

9、ol(newBMap.NavigationControl();2.map.addControl(newBMap.ScaleControl();3.map.addControl(newBMap.OverviewMapControl();map.addControl(newBMap.NavigationControl();map.addControl(newBMap.ScaleControl();map.addControl(newBMap.OverviewMapControl();控制控件的位置初始化控件時，可提供一個可選參數(shù)，參數(shù)類型為一個JavaScript對象。其中anchor和offse

10、tX、offsetY共同控制控件在地圖上的位置。anchor表示控件?？吭诘貓D的哪個角，允許的值為：BMAP_ANCHOR_TOP_LEFTBMAP_ANCHOR_TOP_RIGHTBMAP_ANCHOR_BOTTOM_LEFTBMAP_ANCHOR_BOTTOM_RIGHT除了指定停靠位置外，還可以提供偏移量，用來指示控件距離地圖邊界相隔多少像素。本示例將標(biāo)準(zhǔn)地圖控件放置在地圖的右上角，間隔10個像素。1.varopts=anchor:BMAP_ANCHOR_TOP_RIGHT,offset:newBMap.Size(10,10)2.map.addControl(newBMap.Naviga

11、tionControl(opts);varopts=anchor:BMAP_ANCHOR_TOP_RIGHT,offset:newBMap.Size(10,10)map.addControl(newBMap.NavigationControl(opts);修改控件的配置地圖API的控件提供了豐富的配置參數(shù)，您可參考API文檔來修改它們以便得到符合要求的控件外觀。本示例將調(diào)整平移縮放地圖控件的外觀。1.varopts=type:BMAP_NAVIGATION_CONTROL_SMALL2.map.addControl(newBMap.NavigationControl(opts);varopts

12、=type:BMAP_NAVIGATION_CONTROL_SMALLmap.addControl(newBMap.NavigationControl(opts);自定義控件百度地圖API允許您通過繼承BMap.Control來創(chuàng)建自定義地圖控件。（注意JavaScript是通過prototype屬性進行繼承的）要創(chuàng)建可用的自定義控件，您需要實現(xiàn)類定義中的一個抽象方法并給兩個屬性賦值，它們是：initialize()和defaultAnchor、defaultOffset。initialize()方法必須返回控件容器的DOM元素，defaultAnchor為控件默認(rèn)的?？课恢?，defaultO

13、ffset為控件默認(rèn)的間隔距離。所有自定義的地圖控件中的DOM元素最終都應(yīng)該添加到地圖容器（即地圖所在的DOM元素）中去，這個地圖容器可以通過BMap.Map.getContainer()方法獲得。在此示例中，創(chuàng)建一個簡單的放大控件，每一次點擊將地圖放大兩個級別。它具有文本標(biāo)識，而不是平移縮放控件中使用的圖形圖標(biāo)。1./定義一個控件類，即function2.functionZoomControl()3./設(shè)置默認(rèn)?？课恢煤推屏?.this.defaultAnchor=BMAP_ANCHOR_TOP_LEFT;5.this.defaultOffset=newBMap.Size(10,10);6

14、.7./通過JavaScript的prototype屬性繼承于BMap.Control8.ZoomCtotype=newBMap.Control();9./自定義控件必須實現(xiàn)自己的initialize方法，并且將控件的DOM元素返回10./在本方法中創(chuàng)建個div元素作為控件的容器，并將其添加到地圖容器中11.ZoomCtotype.initialize=function(map)12./創(chuàng)建一個DOM元素13.vardiv=document.createElement(div);14./添加文字說明15.div.appendChild(document.

15、createTextNode(放大2級);16./設(shè)置樣式17.div.style.cursor=pointer;18.div.style.border=1pxsolidgray;19.div.style.backgroundColor=white;20./綁定事件，點擊一次放大兩級21.div.onclick=function(e)22.map.zoomTo(map.getZoom()+2);23.24./添加DOM元素到地圖中25.map.getContainer().appendChild(div);26./將DOM元素返回27.returndiv;28.29./創(chuàng)建控件30.varmy

16、ZoomCtrl=newZoomControl();31./添加到地圖當(dāng)中32.map.addControl(myZoomCtrl);地圖覆蓋物概述所有疊加或覆蓋到地圖的內(nèi)容，我們統(tǒng)稱為地圖覆蓋物。如標(biāo)注、矢量圖形元素(包括：折線和多邊形)、信息窗口等。覆蓋物擁有自己的地理坐標(biāo)，當(dāng)您拖動或縮放地圖時，它們會相應(yīng)的移動。地圖API提供了如下幾種覆蓋物：Overlay：覆蓋物的抽象基類，此類不可實例化，所有的覆蓋物均繼承此類的方法。Marker：標(biāo)注表示地圖上的點，可自定義標(biāo)注的圖標(biāo)。Label：表示地圖上的文本標(biāo)注，您可以自定義標(biāo)注的文本內(nèi)容。Polyline：表示地圖上的折線。Polygon：

17、表示地圖上的多邊形。多邊形類似于閉合的折線，另外您也可以為其添加填充顏色。InfoWindow：信息窗口也是一種特殊的覆蓋物。注意：同一時刻只能有一個信息窗口在地圖上打開?？梢允褂肂Map.Map.addOverlay()方法向地圖添加覆蓋物，使用BMap.Map.removeOverlay()方法移除覆蓋物，注意此方法不適用于InfoWindow。標(biāo)注標(biāo)注表示地圖上的點。API提供了默認(rèn)圖標(biāo)樣式，您也可以通過Icon類來指定自定義圖標(biāo)。BMap.Marker的構(gòu)造函數(shù)的參數(shù)為BMap.Point和BMap.MarkerOptions（可選）。注意：當(dāng)您使用自定義圖標(biāo)時，標(biāo)注的地理坐標(biāo)點將位于

18、標(biāo)注所用圖標(biāo)的中心位置，您可通過Icon的offset屬性修改標(biāo)定位置。下面的示例向地圖中心點添加了一個標(biāo)注，并使用默認(rèn)的標(biāo)注樣式。1.varmap=newBMap.Map(container);2.varpoint=newBMap.Point(116.404,39.915);3.map.centerAndZoom(point,15);4.varmarker=newBMap.Marker(point);/創(chuàng)建標(biāo)注5.map.addOverlay(marker);/將標(biāo)注添加到地圖中varmap=newBMap.Map(container);varpoint=newBMap.Point(116.

19、404,39.915);map.centerAndZoom(point,15);varmarker=newBMap.Marker(point);/創(chuàng)建標(biāo)注map.addOverlay(marker);/將標(biāo)注添加到地圖中定義標(biāo)注圖標(biāo)通過BMap.Icon類可實現(xiàn)自定義標(biāo)注的圖標(biāo)，下面示例通過參數(shù)BMap.MarkerOptions的icon屬性進行設(shè)置，您也可以使用BMap.Marker.setIcon()方法。1.varmap=newBMap.Map(container);2.varpoint=newBMap.Point(116.404,39.915);3.map.centerAndZoom

20、(point,15);4./編寫自定義函數(shù)，創(chuàng)建標(biāo)注5.functionaddMarker(point,index)6./創(chuàng)建圖標(biāo)對象7.varmyIcon=newBMap.Icon(,newBMap.Size(23,25),8.offset:newBMap.Size(10,25),/指定定位位置9.imageOffset:newBMap.Size(0,0-index*25)/設(shè)置圖片偏移10.);11.varmarker=newBMap.Marker(point,icon:myIcon);12.map.addOverlay(marker);13.14./隨機向地圖添加10個標(biāo)注15.varb

21、ounds=map.getBounds();16.varlngSpan=bounds.maxX-bounds.minX;17.varlatSpan=bounds.maxY-bounds.minY;18.for(vari=0;i10;i+)19.varpoint=newBMap.Point(bounds.minX+lngSpan*(Math.random()*0.7+0.15),20.bounds.minY+latSpan*(Math.random()*0.7+0.15);21.addMarker(point,i);22.varmap=newBMap.Map(container);varpoin

22、t=newBMap.Point(116.404,39.915);map.centerAndZoom(point,15);/編寫自定義函數(shù)，創(chuàng)建標(biāo)注functionaddMarker(point,index)/創(chuàng)建圖標(biāo)對象varmyIcon=newBMap.Icon(offset:newBMap.Size(10,25),/指定定位位置imageOffset:newBMap.Size(0,0-index*25)/設(shè)置圖片偏移);varmarker=newBMap.Marker(point,icon:myIcon);map.addOverlay(marker);/隨機向地圖添加10個標(biāo)注varbou

23、nds=map.getBounds();varlngSpan=bounds.maxX-bounds.minX;varlatSpan=bounds.maxY-bounds.minY;for(vari=0;i10;i+)varpoint=newBMap.Point(bounds.minX+lngSpan*(Math.random()*0.7+0.15),bounds.minY+latSpan*(Math.random()*0.7+0.15);addMarker(point,i);監(jiān)聽標(biāo)注的事件事件方法與Map事件機制相同。1.marker.addEventListener(click,functi

24、on()2.alert(您點擊了標(biāo)注);3.);marker.addEventListener(click,function()alert(您點擊了標(biāo)注););內(nèi)存釋放如果您在地圖中需要反復(fù)添加大量的標(biāo)注，這可能會占用較多的內(nèi)存資源。如果您的標(biāo)注在被移除后不再使用，可調(diào)用Overlay.dispose()方法來釋放內(nèi)存。注意在調(diào)用此方法后標(biāo)注將不能再次添加到地圖上。例如，您可以在標(biāo)注被移除后調(diào)用此方法：1.map.removeOverlay(marker);2.marker.dispose();map.removeOverlay(marker);marker.dispose();信息窗口信息窗

25、口在地圖上方的浮動顯示HTML內(nèi)容。信息窗口可直接在地圖上的任意位置打開，也可以在標(biāo)注對象上打開（此時信息窗口的坐標(biāo)與標(biāo)注的坐標(biāo)一致）?？梢允褂肂Map.InfoWindow來創(chuàng)建一個信息窗實例，注意同一時刻地圖上只能有一個信息窗口處于打開狀態(tài)。1.varopts=2.width:250,/信息窗口寬度3.height:100,/信息窗口高度4.title:Hello/信息窗口標(biāo)題5.6.varinfoWindow=newBMap.InfoWindow(World,opts);/創(chuàng)建信息窗口對象7.map.openInfoWindow(infoWindow,map.getCenter();/打

26、開信息窗口varopts=width:250,/信息窗口寬度height:100,/信息窗口高度title:Hello/信息窗口標(biāo)題varinfoWindow=newBMap.InfoWindow(World,opts);/創(chuàng)建信息窗口對象map.openInfoWindow(infoWindow,map.getCenter();/打開信息窗口折線BMap.Polyline對象表示地圖上的折線覆蓋物。它包含一組點，并將這些點連接起來形成折線。添加折線折線在地圖上繪制為一系列直線段。可以自定義這些線段的顏色、粗細(xì)和透明度。顏色可以是十六進制數(shù)字形式（比如：#ff0000）或者是顏色關(guān)鍵字（比如：

27、red）。BMap.Polyline對象需要瀏覽器支持矢量繪制功能。在InternetExplorer中，地圖使用VML（請參閱VML）繪制折線；在其他瀏覽器中使用SVG（如果可用）。以下代碼段會在兩點之間創(chuàng)建6像素寬的藍(lán)色折線：1.varpolyline=newBMap.Polyline(2.newBMap.Point(116.399,39.910),3.newBMap.Point(116.405,39.920)4.,5.strokeColor:blue,strokeWeight:6,strokeOpacity:0.56.);7.map.addOverlay(polyline);地圖事件概述

28、瀏覽器中的JavaScript是“事件驅(qū)動的”，這表示JavaScript通過生成事件來響應(yīng)交互，并期望程序能夠“監(jiān)聽”感興趣的活動。例如，在瀏覽器中，用戶的鼠標(biāo)和鍵盤交互可以創(chuàng)建在DOM內(nèi)傳播的事件。對某些事件感興趣的程序會為這些事件注冊JavaScript事件監(jiān)聽器，并在接收這些事件時執(zhí)行代碼。百度地圖API擁有一個自己的事件模型，程序員可監(jiān)聽地圖API對象的自定義事件，使用方法和DOM事件類似。但請注意，地圖API事件是獨立的，與標(biāo)準(zhǔn)DOM事件不同。事件的監(jiān)聽百度地圖API中的每一個對象都含有addEventListener方法，您可以通過該方法來監(jiān)聽對象事件。例如，BMap.Map包含

29、click、dblclick等事件。在特定環(huán)境下這些事件會被觸發(fā)，同時監(jiān)聽函數(shù)會得到相應(yīng)的事件參數(shù)e，比如當(dāng)用戶點擊地圖時，e參數(shù)會包含鼠標(biāo)所對應(yīng)的地理位置point。有關(guān)地圖API對象的事件，請參考完整的API參考文檔。addEventListener方法有兩個參數(shù)：監(jiān)聽的事件名稱和事件觸發(fā)時調(diào)用的函數(shù)。下面示例中，每當(dāng)用戶點擊地圖時，會彈出一個警告框。1.varmap=newBMap.Map(container);2.map.centerAndZoom(newBMap.Point(116.404,39.915),11);3.map.addEventListener(click,functi

30、on()4.alert(您點擊了地圖。);5.);varmap=newBMap.Map(container);map.centerAndZoom(newBMap.Point(116.404,39.915),11);map.addEventListener(click,function()alert(您點擊了地圖。););通過監(jiān)聽事件還可以捕獲事件觸發(fā)后的狀態(tài)。下面示例顯示用戶拖動地圖后地圖中心的經(jīng)緯度信息。1.varmap=newBMap.Map(container);2.map.centerAndZoom(newBMap.Point(116.404,39.915),11);3.map.add

31、EventListener(dragend,function()4.varcenter=map.getCenter();5.document.getElementById(info).innerHTML=center.lng+,+center.lat;6.);varmap=newBMap.Map(container);map.centerAndZoom(newBMap.Point(116.404,39.915),11);map.addEventListener(dragend,function()varcenter=map.getCenter();document.getElementById

32、(info).innerHTML=center.lng+,+center.lat;);事件參數(shù)和this在標(biāo)準(zhǔn)的DOM事件模型中（DOMLevel2Events），監(jiān)聽函數(shù)會得到一個事件對象e，在e中可以獲取有關(guān)該事件的信息。同時在監(jiān)聽函數(shù)中this會指向觸發(fā)該事件的DOM元素。百度地圖API的事件模型與此類似，在事件監(jiān)聽函數(shù)中傳遞事件對象e，每個e參數(shù)至少包含事件類型（type）和觸發(fā)該事件的對象（target）。API還保證函數(shù)內(nèi)的this指向觸發(fā)（同時也是綁定）事件的API對象。例如，通過參數(shù)e得到點擊的經(jīng)緯度坐標(biāo)。1.varmap=newBMap.Map(container);2.ma

33、p.centerAndZoom(newBMap.Point(116.404,39.915),11);3.map.addEventListener(click,function(e)4.document.getElementById(info).innerHTML=e.point.lng+,+e.point.lat;5.);varmap=newBMap.Map(container);map.centerAndZoom(newBMap.Point(116.404,39.915),11);map.addEventListener(click,function(e)document.getElemen

34、tById(info).innerHTML=e.point.lng+,+e.point.lat;);或者通過this得到地圖縮放后的級別。1.varmap=newBMap.Map(container);2.map.centerAndZoom(newBMap.Point(116.404,39.915),11);3.map.addEventListener(zoomend,function()4.document.getElementById(info).innerHTML=地圖縮放至：+this.getZoom()+級;5.);移除監(jiān)聽事件當(dāng)您不再希望監(jiān)聽事件時，可以將事件監(jiān)聽進行移除。每個AP

35、I對象提供了removeEventListener用來移除事件監(jiān)聽函數(shù)。下面示例中，用戶第一次點擊地圖會觸發(fā)事件監(jiān)聽函數(shù)，在函數(shù)內(nèi)部對事件監(jiān)聽進行了移除，因此后續(xù)的點擊操作則不會觸發(fā)監(jiān)聽函數(shù)。1.varmap=newBMap.Map(container);2.map.centerAndZoom(newBMap.Point(116.404,39.915),11);3.functionshowInfo(e)4.document.getElementById(info).innerHTML=e.point.lng+,+e.point.lat;5.map.removeEventListener(cli

36、ck,showInfo);6.7.map.addEventListener(click,showInfo);地圖圖層概念地圖可以包含一個或多個圖層，每個圖層在每個級別都是由若干張圖塊組成的，它們覆蓋了地球的整個表面。在最低的縮放級別（級別1）中，整個地球由4張圖塊組成。隨著級別的增長，地圖所使用的圖塊個數(shù)也隨之增多。自定義圖層百度地圖中提供一個BMap.TileLayer類，可以實現(xiàn)用戶自定義圖層功能?？梢栽诎俣鹊貓D上疊加一層自定義的圖塊。以下代碼在每個圖塊的所有縮放級別上顯示一個簡單的透明疊加層，使用浮動紅色小水滴表示圖塊的輪廓。1.varmap=newBMap.Map(container)

37、;/創(chuàng)建地圖實例2.varpoint=newBMap.Point(116.404,39.915);/創(chuàng)建點坐標(biāo)3.map.centerAndZoom(point,15);/初始化地圖，設(shè)置中心點坐標(biāo)和地圖級別4.vartilelayer=newBMap.TileLayer();/創(chuàng)建地圖層實例5.tilelayer.getTilesUrl=function()/設(shè)置圖塊路徑6.returnlayer.gif;7.;8.map.addTileLayer(tilelayer);/將圖層添加到地圖上地圖工具概述百度地圖提供了交互功能更為復(fù)雜的“工具”，它包括：PushpinTool：標(biāo)注工具。通過此

38、工具用戶可在地圖任意區(qū)域添加標(biāo)注。DistanceTool：測距工具。通過此工具用戶可測量地圖上任意位置之間的距離。DragAndZoomTool：區(qū)域縮放工具。此工具將根據(jù)用戶拖拽繪制的矩形區(qū)域大小對地圖進行放大或縮小操作。工具類在初始化時需要提供地圖實例參數(shù)，以便使工具在該地圖上生效。您可以在地圖上添加多個工具，但同一時刻只能有一個工具處于開啟狀態(tài)。標(biāo)注工具和測距工具在完成一次操作后將自動退出開啟狀態(tài)，而區(qū)域縮放工具可以自行配置是否自動關(guān)閉。向地圖添加工具在地圖正確初始化后，您可以創(chuàng)建工具實例。下面示例展示了如何向地圖添加一個標(biāo)注工具。1.varmap=newBMap.Map(contai

39、ner);2.map.centerAndZoom(newBMap.Point(116.404,39.915),15);3.varmyPushpin=newBMap.PushpinTool(map);/創(chuàng)建標(biāo)注工具實例4.myPushpin.addEventListener(markend,function(e)/監(jiān)聽事件，提示標(biāo)注點坐標(biāo)信息5.alert(您標(biāo)注的位置：+6.e.marker.getPoint().lng+,+7.e.marker.getPoint().lat);8.);9.myPushpin.open();/開啟標(biāo)注工具varmap=newBMap.Map(container

40、);map.centerAndZoom(newBMap.Point(116.404,39.915),15);varmyPushpin=newBMap.PushpinTool(map);/創(chuàng)建標(biāo)注工具實例myPushpin.addEventListener(markend,function(e)/監(jiān)聽事件，提示標(biāo)注點坐標(biāo)信息alert(您標(biāo)注的位置：+e.marker.getPoint().lng+,+e.marker.getPoint().lat););myPushpin.open();/開啟標(biāo)注工具通過按鈕控制工具的開啟和關(guān)閉工具類沒有提供控制其開啟和關(guān)閉的UI元素。您可以根據(jù)需要自己創(chuàng)建這

41、些元素，把它們放置在地圖區(qū)域內(nèi)或者區(qū)域外均可。調(diào)用工具類的open和close可控制工具的開啟和關(guān)閉。首先初始化地圖并創(chuàng)建一個測距工具實例：1.varmap=newBMap.Map(container);2.map.centerAndZoom(newBMap.Point(116.404,39.915),15);3.varmyDis=newBMap.DistanceTool(map);varmap=newBMap.Map(container);map.centerAndZoom(newBMap.Point(116.404,39.915),15);varmyDis=newBMap.Distance

42、Tool(map);接著我們創(chuàng)建兩個按鈕元素并為其添加點擊事件。1.2.修改工具的配置一些工具類提供了可修改的配置參數(shù)，您可參考API文檔來修改它們以便符合您的要求。本示例為區(qū)域縮放工具添加提示文字。1.varmap=newBMap.Map(container);2.map.centerAndZoom(newBMap.Point(116.404,39.915),15);3.varmyDrag=newBMap.DragAndZoomTool(map,4.followText:拖拽鼠標(biāo)進行操作5.);地圖服務(wù)概述地圖服務(wù)是指那些提供數(shù)據(jù)信息的接口，比如本地搜索、路線規(guī)劃等等。百度地圖API提供的服

43、務(wù)有：LocalSearch：本地搜索，提供某一特定地區(qū)的位置搜索服務(wù)，比如在北京市搜索“公園”。TransitRoute：公交導(dǎo)航，提供某一特定地區(qū)的公交出行方案的搜索服務(wù)。DrivingRoute：駕車導(dǎo)航，提供駕車出行方案的搜索服務(wù)。WalkingRoute：步行導(dǎo)航，提供步行出行方案的搜索服務(wù)。Geocoder：地址解析，提供將地址信息轉(zhuǎn)換為坐標(biāo)點信息的服務(wù)。LocalCity：本地城市，提供自動判斷您所在城市的服務(wù)。TrafficControl：實時路況控件，提供實時和歷史路況信息服務(wù)。搜索類的服務(wù)接口需要指定一個搜索范圍，否則接口將不能工作。本地搜索BMap.LocalSearch

44、提供本地搜索服務(wù)，在使用本地搜索時需要為其設(shè)置一個檢索區(qū)域，檢索區(qū)域可以是BMap.Map對象、BMap.Point對象或者是省市名稱（比如：北京市）的字符串。BMap.LocalSearch構(gòu)造函數(shù)的第二個參數(shù)是可選的，您可以在其中指定結(jié)果的呈現(xiàn)。BMap.RenderOptions類提供了若干控制呈現(xiàn)的屬性，其中map指定了結(jié)果所展現(xiàn)的地圖實例，panel指定了結(jié)果列表的容器元素。下面這個示例展示了在北京市檢索天安門。搜索區(qū)域設(shè)置為地圖實例，并告知結(jié)果需要展現(xiàn)在地圖實例上。1.varmap=newBMap.Map(container);2.map.centerAndZoom(newBMap.Point(116.404,39.915),11);3.varlocal=newBMap.LocalSearch(map,4.renderOptions:map:map5.);6.local.search(天安門);varmap=newBMap.Map(container);map.centerAndZoom(newBMap.Point(116.404,39.915),11);varlocal=newBMap.LocalSea