偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

百度地圖API開(kāi)發(fā)指南

開(kāi)發(fā) 開(kāi)發(fā)工具
本文為百度地圖API官方版本的開(kāi)發(fā)指南，供各位51CTO的網(wǎng)友進(jìn)行參考。

簡(jiǎn)介什么是百度地圖API？

　　百度地圖API是一套由JavaScript語(yǔ)言編寫的應(yīng)用程序接口，它能夠幫助您在網(wǎng)站中構(gòu)建功能豐富、交互性強(qiáng)的地圖應(yīng)用。百度地圖API包含了構(gòu)建地圖基本功能的各種接口，提供了諸如本地搜索、路線規(guī)劃等數(shù)據(jù)服務(wù)。

面向的讀者

　　API是提供給那些具有一定JavaScript編程經(jīng)驗(yàn)和了解面向?qū)ο蟾拍畹淖x者使用。此外，讀者還應(yīng)該對(duì)地圖產(chǎn)品有一定的了解。

　　您在使用中遇到任何問(wèn)題，都可以通過(guò)API貼吧或交流群反饋給我們。

獲取API

　　地圖API是由JavaScript語(yǔ)言編寫的，您在使用之前需要通過(guò)<script>標(biāo)簽將API引用到頁(yè)面中：

  1. <script src="http://api.map.baidu.com/api?v=1.2" type="text/javascript"></script> 

　　其中參數(shù)v為API當(dāng)前的版本號(hào)，目前最新版本為1.2。在1.2版本之前您還可以設(shè)置services參數(shù)，以告知API是否加載服務(wù)部分，true表示加載，false表示不加載，默認(rèn)為true。

開(kāi)發(fā)移動(dòng)平臺(tái)上的地圖應(yīng)用

　　API自1.1版本起開(kāi)始支持iPhone、Android這樣的移動(dòng)平臺(tái)。用戶通過(guò)手機(jī)瀏覽器就可以訪問(wèn)由地圖API創(chuàng)建出來(lái)的應(yīng)用。移動(dòng)平臺(tái)的屏幕尺寸通常比PC或筆記本要小，操作方式也有所不同。為了更好的在手機(jī)瀏覽器上展示地圖，我們有如下建議：

將地圖容器高設(shè)置為100%，使其充滿整個(gè)屏幕，或者您也可以計(jì)算瀏覽器窗口的大小并進(jìn)行設(shè)置。添加下面的meta標(biāo)簽： <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />這樣做是為了讓頁(yè)面以正常比例進(jìn)行顯示并且禁止用戶縮放頁(yè)面的操作。

　　您可以參考 Apple's Developer documentation 和 Android documentation 獲得更多信息。

異步加載

　　API 1.1和1.2版本支持異步加載，您可以在引用腳本的時(shí)候添加callback參數(shù)，當(dāng)腳本加載完成后callback函數(shù)會(huì)被立刻調(diào)用。請(qǐng)參考下面的使用示例：

  1. <!DOCTYPE html> 
  2. <html><head><meta charset="utf-8"/><title>異步加載</title>
  3. <script type="text/javascript">function initialize() {　  
  4. var mp = new BMap.Map('map');　  
  5. mp.centerAndZoom(new BMap.Point(121.491, 31.233), 11);}function loadScript() {　  
  6. var script = document.createElement("script");　  
  7. script.src = "http://api.map.baidu.com/api?v=1.2&callback=initialize";　  
  8. document.body.appendChild(script);}window.onload = loadScript;</script></head><body> 
  9. 　<div id="map" style="width:500px;height:320px"></div> 
  10. </body></html>兼容性 

　　瀏覽器：IE 6.0+、Firefox 3.6+、Opera 9.0+、Safari 3.0+、Chrome

　　操作系統(tǒng)：Windows、Mac、Linux

　　移動(dòng)平臺(tái)：iPhone、Android

版本說(shuō)明

　　地址 http://api.map.baidu.com/api?v=1.2 中的參數(shù)v表示您加載API的版本，例如當(dāng)前API的最新版本為1.2，則您可在地址中添加 v=1.2。當(dāng)API升級(jí)后，如果已有接口在使用、命名等方面發(fā)生了變化，我們會(huì)為其增加一個(gè)新的版本號(hào)，這不會(huì)對(duì)您現(xiàn)有的應(yīng)用造成任何影響。如果升級(jí)只是修復(fù)一些bug或者在不影響現(xiàn)有功能的前提下增加接口、改善性能，則版本號(hào)不會(huì)發(fā)生變化。您可以在更新日志頁(yè)面查看版本的變化。

問(wèn)題解答

　　如果您在使用百度地圖API中遇到問(wèn)題，請(qǐng)嘗試通過(guò)以下途徑解決：

確認(rèn)您使用了正確的地圖API地址。訪問(wèn)百度地圖API吧，查找相關(guān)問(wèn)題的帖子，或者將您的問(wèn)題發(fā)布到貼吧中。 基礎(chǔ)知識(shí) 百度地圖的“Hello, World”

　　開(kāi)始學(xué)習(xí)百度地圖API最簡(jiǎn)單的方式是看一個(gè)簡(jiǎn)單的示例。以下代碼創(chuàng)建了一個(gè)地圖并以天安門作為地圖的中心：

  1. <!DOCTYPE html><html><head> 
  2. <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  4. <title>Hello, World</title> 
  5. <style type="text/css">html{height:100%}body{height:100%;margin:0px;padding:0px}#container{height:100%}</style> 
  6. <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"> 
  7. </script></head><body> 
  8. <div id="container"></div> 
  9. <script type="text/javascript">var map = new BMap.Map("container");   
  10. // 創(chuàng)建地圖實(shí)例var point = new BMap.Point(116.404, 39.915);   
  11. // 創(chuàng)建點(diǎn)坐標(biāo)map.centerAndZoom(point, 15);   
  12. // 初始化地圖，設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別</script> 
  13. </body></html> 

　　下面我們分步向您介紹：

準(zhǔn)備頁(yè)面

　　根據(jù)HTML標(biāo)準(zhǔn)，每一份HTML文檔都應(yīng)該聲明正確的文檔類型，我們建議您使用最新的符合HTML5規(guī)范的文檔聲明：

<!DOCTYPE html>

　　您也可以根據(jù)需要選擇其他類型的文檔聲明，這樣瀏覽器會(huì)以標(biāo)準(zhǔn)的方式對(duì)頁(yè)面進(jìn)行渲染，保證頁(yè)面最大的兼容性。我們不建議您使用quirks模式進(jìn)行開(kāi)發(fā)。

　　下面我們添加一個(gè)meta標(biāo)簽，以便使您的頁(yè)面更好的在移動(dòng)平臺(tái)上展示。

  1. <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 

　　接著我們?cè)O(shè)置樣式，使地圖充滿整個(gè)瀏覽器窗口：

  1. <style type="text/css">　   
  2. html{height:100%}　   
  3. body{height:100%;margin:0px;padding:0px}　   
  4. #container{height:100%}　   
  5. </style>引用百度地圖API文件   
  6. <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"> 
  7. </script>創(chuàng)建地圖容器元素 

　　地圖需要一個(gè)HTML元素作為容器，這樣才能展現(xiàn)到頁(yè)面上。這里我們創(chuàng)建了一個(gè)div元素。

命名空間

　　API使用BMap作為命名空間，所有類均在該命名空間之下，比如：BMap.Map、BMap.Control、BMap.Overlay。

創(chuàng)建地圖實(shí)例 var map = new BMap.Map("container");

　　位于BMap命名空間下的Map類表示地圖，通過(guò)new操作符可以創(chuàng)建一個(gè)地圖實(shí)例。其參數(shù)可以是元素id也可以是元素對(duì)象。

　　注意在調(diào)用此構(gòu)造函數(shù)時(shí)應(yīng)確保容器元素已經(jīng)添加到地圖上。

創(chuàng)建點(diǎn)坐標(biāo) var point = new BMap.Point(116.404, 39.915);

　　這里我們使用BMap命名空間下的Point類來(lái)創(chuàng)建一個(gè)坐標(biāo)點(diǎn)。Point類描述了一個(gè)地理坐標(biāo)點(diǎn)，其中116.404表示經(jīng)度，39.915表示緯度。

地圖初始化map.centerAndZoom(point, 15);

　　在創(chuàng)建地圖實(shí)例后，我們需要對(duì)其進(jìn)行初始化，BMap.Map.centerAndZoom()方法要求設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別。地圖必須經(jīng)過(guò)初始化才可以執(zhí)行其他操作。

地圖配置與操作

　　地圖被實(shí)例化并完成初始化以后，就可以與其進(jìn)行交互了。API中的地圖對(duì)象的外觀與行為與百度地圖網(wǎng)站上交互的地圖非常相似。它支持鼠標(biāo)拖拽、滾輪縮放、雙擊放大等交互功能。您也可以修改配置來(lái)改變這些功能。 比如，默認(rèn)情況下地圖不支持鼠標(biāo)滾輪縮放操作，因?yàn)檫@樣可能會(huì)影響整個(gè)頁(yè)面的用戶體驗(yàn)，但是如果您希望在地圖中使用鼠標(biāo)滾輪控制縮放，則可以調(diào)用map.enableScrollWheelZoom方法來(lái)開(kāi)啟。配置選項(xiàng)可以在Map類參考的配置方法一節(jié)中找到。

　　此外，您還可以通過(guò)編程的方式與地圖交互。Map類提供了若干修改地圖狀態(tài)的方法。例如：setCenter()、panTo()、zoomTo()等等。

　　下面示例顯示一個(gè)地圖，等待兩秒鐘后，它會(huì)移動(dòng)到新中心點(diǎn)。panTo()方法將讓地圖平滑移動(dòng)至新中心點(diǎn)，如果移動(dòng)距離超過(guò)了當(dāng)前地圖區(qū)域大小，則地圖會(huì)直跳到該點(diǎn)。

  1. var map = new BMap.Map("container");　   
  2. var point = new BMap.Point(116.404, 39.915);　 map.centerAndZoom(point, 15);　   
  3. window.setTimeout(function(){　　  
  4. map.panTo(new BMap.Point(116.409, 39.918));  
  5. 　 }, 2000); 控件 地圖控件概述 

　　百度地圖上負(fù)責(zé)與地圖交互的UI元素稱為控件。百度地圖API中提供了豐富的控件，您還可以通過(guò)Control類來(lái)實(shí)現(xiàn)自定義控件。

　　地圖API中提供的控件有：

　　Control：控件的抽象基類，所有控件均繼承此類的方法、屬性。通過(guò)此類您可實(shí)現(xiàn)自定義控件。

　　NavigationControl：地圖平移縮放控件，默認(rèn)位于地圖左上方，它包含控制地圖的平移和縮放的功能。

　　OverviewMapControl：縮略地圖控件，默認(rèn)位于地圖右下方，是一個(gè)可折疊的縮略地圖。

　　ScaleControl：比例尺控件，默認(rèn)位于地圖左下方，顯示地圖的比例關(guān)系。

　　MapTypeControl：地圖類型控件，默認(rèn)位于地圖右上方。

　　CopyrightControl：版權(quán)控件，默認(rèn)位于地圖左下方。

向地圖添加控件

　　可以使用Map.addControl()方法向地圖添加控件。在此之前地圖需要進(jìn)行初始化。例如，要將標(biāo)準(zhǔn)地圖控件添加到地圖中，可在代碼中添加如下內(nèi)容：

var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); map.addControl(new BMap.NavigationControl());

　　可以向地圖添加多個(gè)控件。在本例中我們向地圖添加一個(gè)平移縮放控件、一個(gè)比例尺控件和一個(gè)縮略圖控件。在地圖中添加控件后，它們即刻生效。

  1. map.addControl(new BMap.NavigationControl());   
  2. map.addControl(new BMap.ScaleControl());   
  3. map.addControl(new BMap.OverviewMapControl());   
  4. map.addControl(new BMap.MapTypeControl());   
  5. map.setCurrentCity("北京"); // 僅當(dāng)設(shè)置城市信息時(shí)，  
  6. MapTypeControl的切換功能才能可用 控制控件位置 

　　初始化控件時(shí)，可提供一個(gè)可選參數(shù)，其中的anchor和offset屬性共同控制控件在地圖上的位置。

控件?？课恢?/p>

　　anchor表示控件的?？课恢?，即控件停靠在地圖的哪個(gè)角。當(dāng)?shù)貓D尺寸發(fā)生變化時(shí)，控件會(huì)根據(jù)停靠位置的不同來(lái)調(diào)整自己的位置。anchor允許的值為：

　　BMAP_ANCHOR_TOP_LEFT 表示控件定位于地圖的左上角。

　　BMAP_ANCHOR_TOP_RIGHT 表示控件定位于地圖的右上角。

　　BMAP_ANCHOR_BOTTOM_LEFT 表示控件定位于地圖的左下角。

　　BMAP_ANCHOR_BOTTOM_RIGHT 表示控件定位于地圖的右下角。

控件位置偏移

　　除了指定?？课恢猛猓€可以通過(guò)偏移量來(lái)指示控件距離地圖邊界有多少像素。如果兩個(gè)控件的停靠位置相同，那么控件可能會(huì)重疊在一起，這時(shí)就可以通過(guò)偏移值使二者分開(kāi)顯示。

  1. var opts = {offset: new BMap.Size(150, 5)} map.addControl(new BMap.ScaleControl(opts)); 修改控件配置 

　　地圖API的控件提供了豐富的配置參數(shù)，您可參考API文檔來(lái)修改它們以便得到符合要求的控件外觀。例如，NavigationControl控件就提供了如下類型：

　　BMAP_NAVIGATION_CONTROL_LARGE 表示顯示完整的平移縮放控件。

　　BMAP_NAVIGATION_CONTROL_SMALL 表示顯示小型的平移縮放控件。

　　BMAP_NAVIGATION_CONTROL_PAN 表示只顯示控件的平移部分功能。

　　BMAP_NAVIGATION_CONTROL_ZOOM 表示只顯示控件的縮放部分功能。

　　下圖從左向右依次展示了上述不同類型的控件外觀：

下面的示例將調(diào)整平移縮放地圖控件的外觀。

var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL} map.addControl(new BMap.NavigationControl(opts)); 自定義控件

　　百度地圖API允許您通過(guò)繼承Control來(lái)創(chuàng)建自定義地圖控件。

　　要?jiǎng)?chuàng)建可用的自定義控件，您需要做以下工作：

　　定義一個(gè)自定義控件的構(gòu)造函數(shù)。

　　設(shè)置自定義控件構(gòu)造函數(shù)的prototype屬性為Control的實(shí)例，以便繼承控件基類。

　　實(shí)現(xiàn)initialize()方法并提供defaultAnchor和defaultOffset屬性。

定義構(gòu)造函數(shù)并繼承Control

　　首先您需要定義自定義控件的構(gòu)造函數(shù)，并在構(gòu)造函數(shù)中提供defaultAnchor和defaultOffset兩個(gè)屬性，以便API正確定位控件位置，接著讓其繼承于Control。在下面的示例中我們定義一個(gè)名為ZoomControl的控件，每一次點(diǎn)擊將地圖放大兩個(gè)級(jí)別。它具有文本標(biāo)識(shí)，而不是平移縮放控件中使用的圖形圖標(biāo)。

  1. // 定義一個(gè)控件類，即function function ZoomControl(){   
  2. // 設(shè)置默認(rèn)?？课恢煤推屏?nbsp;this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;   
  3. this.defaultOffset = new BMap.Size(10, 10); }   
  4. // 通過(guò)JavaScript的prototype屬性繼承于BMap.Control ZoomControl.prototype = new BMap.Control();  
  5.  初始化自定義控件 

　　當(dāng)調(diào)用map.addControl()方法添加自定義控件時(shí)，API會(huì)調(diào)用該對(duì)象的initialize()方法用來(lái)初始化控件，您需要實(shí)現(xiàn)此方法并在其中創(chuàng)建控件所需的DOM元素，并添加DOM事件。所有自定義控件中的DOM元素最終都應(yīng)該添加到地圖容器（即地圖所在的DOM元素）中去，地圖容器可以通過(guò)map.getContainer()方法獲得。最后initialize()方法需要返回控件容器的DOM元素。

  1. // 自定義控件必須實(shí)現(xiàn)initialize方法，并且將控件的DOM元素返回  
  2.  // 在本方法中創(chuàng)建個(gè)div元素作為控件的容器，并將其添加到地圖容器中 
  3. ZoomControl.prototype.initialize = function(map){   
  4. // 創(chuàng)建一個(gè)DOM元素 var div = document.createElement("div");   
  5. // 添加文字說(shuō)明 div.appendChild(document.createTextNode("放大2級(jí)"));  
  6.  // 設(shè)置樣式 div.style.cursor = "pointer"; 
  7. div.style.border = "1px solid gray"; 
  8. div.style.backgroundColor = "white";   
  9. // 綁定事件，點(diǎn)擊一次放大兩級(jí) div.onclick = function(e){ map.zoomTo(map.getZoom() + 2); }   
  10. // 添加DOM元素到地圖中 map.getContainer().appendChild(div);   
  11. // 將DOM元素返回 return div; } 添加自定義控件 

　　添加自定義控件與添加其他控件方法一致，調(diào)用map.addControl()方法即可。

// 創(chuàng)建控件實(shí)例 var myZoomCtrl = new ZoomControl(); // 添加到地圖當(dāng)中 map.addControl(myZoomCtrl); 覆蓋物 地圖覆蓋物概述

　　所有疊加或覆蓋到地圖的內(nèi)容，我們統(tǒng)稱為地圖覆蓋物。如標(biāo)注、矢量圖形元素(包括：折線和多邊形和圓)、信息窗口等。覆蓋物擁有自己的地理坐標(biāo)，當(dāng)您拖動(dòng)或縮放地圖時(shí)，它們會(huì)相應(yīng)的移動(dòng)。

　　地圖API提供了如下幾種覆蓋物：

　　Overlay：覆蓋物的抽象基類，所有的覆蓋物均繼承此類的方法。

　　Marker：標(biāo)注表示地圖上的點(diǎn)，可自定義標(biāo)注的圖標(biāo)。

　　Label：表示地圖上的文本標(biāo)注，您可以自定義標(biāo)注的文本內(nèi)容。

　　Polyline：表示地圖上的折線。

　　Polygon：表示地圖上的多邊形。多邊形類似于閉合的折線，另外您也可以為其添加填充顏色。

　　Circle: 表示地圖上的圓。

　　InfoWindow：信息窗口也是一種特殊的覆蓋物，它可以展示更為豐富的文字和多媒體信息。注意：同一時(shí)刻只能有一個(gè)信息窗口在地圖上打開(kāi)。

　　可以使用map.addOverlay方法向地圖添加覆蓋物，使用map.removeOverlay方法移除覆蓋物，注意此方法不適用于InfoWindow。

標(biāo)注

　　標(biāo)注表示地圖上的點(diǎn)。API提供了默認(rèn)圖標(biāo)樣式，您也可以通過(guò)Icon類來(lái)指定自定義圖標(biāo)。Marker的構(gòu)造函數(shù)的參數(shù)為Point和MarkerOptions（可選）。注意：當(dāng)您使用自定義圖標(biāo)時(shí)，標(biāo)注的地理坐標(biāo)點(diǎn)將位于標(biāo)注所用圖標(biāo)的中心位置，您可通過(guò)Icon的offset屬性修改標(biāo)定位置。

　　下面的示例向地圖中心點(diǎn)添加了一個(gè)標(biāo)注，并使用默認(rèn)的標(biāo)注樣式。

  1. var map = new BMap.Map("container");   
  2. var point = new BMap.Point(116.404, 39.915);   
  3. map.centerAndZoom(point, 15);   
  4. var marker = new BMap.Marker(point);   
  5. // 創(chuàng)建標(biāo)注 map.addOverlay(marker);   
  6. // 將標(biāo)注添加到地圖中 定義標(biāo)注圖標(biāo) 

　　通過(guò)Icon類可實(shí)現(xiàn)自定義標(biāo)注的圖標(biāo)，下面示例通過(guò)參數(shù)MarkerOptions的icon屬性進(jìn)行設(shè)置，您也可以使用marker.setIcon()方法。

  1. var map = new BMap.Map("container"); 
  2. var point = new BMap.Point(116.404, 39.915); 
  3. map.centerAndZoom(point, 15); // 編寫自定義函數(shù)，創(chuàng)建標(biāo)注 
  4. function addMarker(point, index){ 
  5. // 創(chuàng)建圖標(biāo)對(duì)象 
  6. var myIcon = new BMap.Icon("markers.png", new BMap.Size(23, 25),  
  7.  { // 指定定位位置。   
  8. // 當(dāng)標(biāo)注顯示在地圖上時(shí)，其所指向的地理位置距離圖標(biāo)左上  
  9.  // 角各偏移10像素和25像素。您可以看到在本例中該位置即是   
  10. // 圖標(biāo)中央下端的尖角位置。 offset: new BMap.Size(10, 25), // 設(shè)置圖片偏移。   
  11. // 當(dāng)您需要從一幅較大的圖片中截取某部分作為標(biāo)注圖標(biāo)時(shí)，您   
  12. // 需要指定大圖的偏移位置，此做法與css sprites技術(shù)類似。 
  13. imageOffset: new BMap.Size(0, 0 - index * 25)   
  14. // 設(shè)置圖片偏移 });   
  15. // 創(chuàng)建標(biāo)注對(duì)象并添加到地圖   
  16. var marker = new BMap.Marker(point, {icon: myIcon});   
  17. map.addOverlay(marker); } // 隨機(jī)向地圖添加10個(gè)標(biāo)注   
  18. var bounds = map.getBounds();   
  19. var lngSpan = bounds.maxX - bounds.minX;  
  20.  var latSpan = bounds.maxY - bounds.minY;   
  21. for (var i = 0;   
  22. i < 10; i ++) { 
  23. var point = new BMap.Point(bounds.minX + lngSpan * (Math.random() * 0.7 + 0.15), bounds.minY + latSpan * (Math.random() * 0.7 + 0.15)); 
  24. addMarker(point, i); } 監(jiān)聽(tīng)標(biāo)注事件 

　　事件方法與Map事件機(jī)制相同?？蓞⒖际录糠?。

  1. marker.addEventListener("click", function(){ alert("您點(diǎn)擊了標(biāo)注"); }); 可托拽的標(biāo)注 

　　marker的enableDragging和disableDragging方法可用來(lái)開(kāi)啟和關(guān)閉標(biāo)注的拖拽功能。默認(rèn)情況下標(biāo)注不支持拖拽，您需要調(diào)用marker.enableDragging()方法來(lái)開(kāi)啟拖拽功能。在標(biāo)注開(kāi)啟拖拽功能后，您可以監(jiān)聽(tīng)標(biāo)注的dragend事件來(lái)捕獲拖拽后標(biāo)注的最新位置。

  1. marker.enableDragging(); marker.addEventListener("dragend", function(e){ alert("當(dāng)前位置：" + e.point.lng + ", " + e.point.lat); }) 內(nèi)存釋放 

　　在API 1.0版本中，如果您需要在地圖中反復(fù)添加大量的標(biāo)注，這可能會(huì)占用較多的內(nèi)存資源。如果您的標(biāo)注在移除后不再使用，可調(diào)用Overlay.dispose()方法來(lái)釋放內(nèi)存。注意在1.0版本中，調(diào)用此方法后標(biāo)注將不能再次添加到地圖上。自1.1版本開(kāi)始，您不在需要使用此方法來(lái)釋放內(nèi)存資源，API會(huì)自動(dòng)幫助您完成此工作。

　　例如，您可以在標(biāo)注被移除后調(diào)用此方法：

  1. map.removeOverlay(marker); marker.dispose();   
  2. // 1.1 版本不需要這樣調(diào)用 信息窗口 

　　信息窗口在地圖上方的浮動(dòng)顯示HTML內(nèi)容。信息窗口可直接在地圖上的任意位置打開(kāi)，也可以在標(biāo)注對(duì)象上打開(kāi)（此時(shí)信息窗口的坐標(biāo)與標(biāo)注的坐標(biāo)一致）。 您可以使用InfoWindow來(lái)創(chuàng)建一個(gè)信息窗實(shí)例，注意同一時(shí)刻地圖上只能有一個(gè)信息窗口處于打開(kāi)狀態(tài)。

  1. var opts = { width : 250,   
  2. // 信息窗口寬度   
  3. height: 100,   
  4. // 信息窗口高度   
  5. title : "Hello"   
  6. // 信息窗口標(biāo)題 }   
  7. var infoWindow = new BMap.InfoWindow("World", opts);   
  8. // 創(chuàng)建信息窗口對(duì)象   
  9. map.openInfoWindow(infoWindow, map.getCenter());   
  10. // 打開(kāi)信息窗口 折線 

　　Polyline表示地圖上的折線覆蓋物。它包含一組點(diǎn)，并將這些點(diǎn)連接起來(lái)形成折線。

添加折線

　　折線在地圖上繪制為一系列直線段?？梢宰远x這些線段的顏色、粗細(xì)和透明度。顏色可以是十六進(jìn)制數(shù)字形式（比如：#ff0000）或者是顏色關(guān)鍵字（比如：red）。

　　Polyline的繪制需要瀏覽器支持矢量繪制功能。在Internet Explorer中，地圖使用VML繪制折線；在其他瀏覽器中使用SVG或者Canvas

　　以下代碼段會(huì)在兩點(diǎn)之間創(chuàng)建6像素寬的藍(lán)色折線：

  1. var polyline = new BMap.Polyline([ 
  2. new BMap.Point(116.399, 39.910), 
  3. new BMap.Point(116.405, 39.920) ], {strokeColor:"blue", 
  4. strokeWeight:6, strokeOpacity:0.5} );   
  5. map.addOverlay(polyline); 自定義覆蓋物 

　　API自1.1版本起支持用戶自定義覆蓋物。

　　要?jiǎng)?chuàng)建自定義覆蓋物，您需要做以下工作：

　　定義一個(gè)自定義覆蓋物的構(gòu)造函數(shù)，通過(guò)構(gòu)造函數(shù)參數(shù)可以傳遞一些自由的變量。

　　設(shè)置自定義覆蓋物對(duì)象的prototype屬性為Overlay的實(shí)例，以便繼承覆蓋物基類。

　　實(shí)現(xiàn)initialize方法，當(dāng)調(diào)用map.addOverlay方法時(shí)，API會(huì)調(diào)用此方法。

　　實(shí)現(xiàn)draw方法。

定義構(gòu)造函數(shù)并繼承Overlay

　　首先您需要定義自定義覆蓋物的構(gòu)造函數(shù)，在下面的示例中我們定義一個(gè)名為SquareOverlay的構(gòu)造函數(shù)，它包含中心點(diǎn)和邊長(zhǎng)兩個(gè)參數(shù)，用來(lái)在地圖上創(chuàng)建一個(gè)方形覆蓋物。

// 定義自定義覆蓋物的構(gòu)造函數(shù) function SquareOverlay(center, length, color){ this._center = center; this._length = length; this._color = color; } // 繼承API的BMap.Overlay SquareOverlay.prototype = new BMap.Overlay(); 初始化自定義覆蓋物

　　當(dāng)調(diào)用map.addOverlay方法添加自定義覆蓋物時(shí)，API會(huì)調(diào)用該對(duì)象的initialize方法用來(lái)初始化覆蓋物，在初始化過(guò)程中需要?jiǎng)?chuàng)建覆蓋物所需要的DOM元素，并添加到地圖相應(yīng)的容器中。

　　地圖提供了若干容器供覆蓋物展示，通過(guò)map.getPanes方法可以得到這些容器元素，它們包括：

　　floatPane

　　markerMouseTarget

　　floatShadow

　　labelPane

　　markerPane

　　mapPane

　　這些對(duì)象代表了不同的覆蓋物容器元素，它們之間存在著覆蓋關(guān)系，最上一層為floatPane，用于顯示信息窗口內(nèi)容，下面依次為標(biāo)注點(diǎn)擊區(qū)域?qū)印⑿畔⒋翱陉幱皩?、文本?biāo)注層、標(biāo)注層和矢量圖形層。

　　我們自定義的方形覆蓋物可以添加到任意圖層上，這里我們選擇添加到markerPane上，作為其一個(gè)子結(jié)點(diǎn)。

// 實(shí)現(xiàn)初始化方法 SquareOverlay.prototype.initialize = function(map){ // 保存map對(duì)象實(shí)例 this._map = map; // 創(chuàng)建div元素，作為自定義覆蓋物的容器 var div = document.createElement("div"); div.style.position = "absolute"; // 可以根據(jù)參數(shù)設(shè)置元素外觀 div.style.width = this._length + "px"; div.style.height = this._length + "px"; div.style.background = this._color; // 將div添加到覆蓋物容器中 map.getPanes().markerPane.appendChild(div); // 保存div實(shí)例 this._div = div; // 需要將div元素作為方法的返回值，當(dāng)調(diào)用該覆蓋物的show、 // hide方法，或者對(duì)覆蓋物進(jìn)行移除時(shí)，API都將操作此元素。 return div; }繪制覆蓋物

　　到目前為止，我們僅僅把覆蓋物添加到了地圖上，但是并沒(méi)有將它放置在正確的位置上。您需要在draw方法中設(shè)置覆蓋物的位置，每當(dāng)?shù)貓D狀態(tài)發(fā)生變化（比如：位置移動(dòng)、級(jí)別變化）時(shí)，API都會(huì)調(diào)用覆蓋物的draw方法，用于重新計(jì)算覆蓋物的位置。通過(guò)map.pointToOverlayPixel方法可以將地理坐標(biāo)轉(zhuǎn)換到覆蓋物的所需要的像素坐標(biāo)。

// 實(shí)現(xiàn)繪制方法 SquareOverlay.prototype.draw = function(){ // 根據(jù)地理坐標(biāo)轉(zhuǎn)換為像素坐標(biāo)，并設(shè)置給容器 var position = this._map.pointToOverlayPixel(this._center); this._div.style.left = position.x - this._length / 2 + "px"; this._div.style.top = position.y - this._length / 2 + "px"; }移除覆蓋物

　　當(dāng)調(diào)用map.removeOverlay或者map.clearOverlays方法時(shí)，API會(huì)自動(dòng)將initialize方法返回的DOM元素進(jìn)行移除。

　　顯示和隱藏覆蓋物

　　自定義覆蓋物會(huì)自動(dòng)繼承Overlay的show和hide方法，方法會(huì)修改由initialize方法返回的DOM元素的style.display屬性。如果自定義覆蓋物元素較為復(fù)雜，您也可以自己實(shí)現(xiàn)show和hide方法。

  1. // 實(shí)現(xiàn)顯示方法   
  2. SquareOverlay.prototype.show = function(){   
  3. if (this._div){ this._div.style.display = ""; } }  
  4.  // 實(shí)現(xiàn)隱藏方法   
  5. SquareOverlay.prototype.hide = function(){   
  6. if (this._div){ this._div.style.display = "none"; } }  
  7. 自定義其他方法 

　　通過(guò)構(gòu)造函數(shù)的prototype屬性，您可以添加任何自定義的方法，比如下面這個(gè)方法每調(diào)用一次就能改變覆蓋物的顯示狀態(tài)：

  1. // 添加自定義方法   
  2. SquareOverlay.prototype.toggle = function(){ if (this._div){   
  3. if (this._div.style.display == ""){ this.hide(); }   
  4. else { this.show(); } } }  
  5. 添加覆蓋物 

　　您現(xiàn)在已經(jīng)完成了一個(gè)完整的自定義覆蓋物的編寫，可以添加到地圖上了。

  1. // 初始化地圖 var map = new BMap.Map("container");   
  2. var point = new BMap.Point(116.404, 39.915);   
  3. map.centerAndZoom(point, 15);   
  4. // 添加自定義覆蓋物 var mySquare = new SquareOverlay(map.getCenter(), 100, "red");   
  5. map.addOverlay(mySquare); 事件 地圖事件概述 

　　瀏覽器中的JavaScript是“事件驅(qū)動(dòng)的”，這表示JavaScript通過(guò)生成事件來(lái)響應(yīng)交互，并期望程序能夠“監(jiān)聽(tīng)”感興趣的活動(dòng)。例如，在瀏覽器中，用戶的鼠標(biāo)和鍵盤交互可以創(chuàng)建在DOM內(nèi)傳播的事件。對(duì)某些事件感興趣的程序會(huì)為這些事件注冊(cè)JavaScript事件監(jiān)聽(tīng)器，并在接收這些事件時(shí)執(zhí)行代碼。

　　百度地圖API擁有一個(gè)自己的事件模型，程序員可監(jiān)聽(tīng)地圖API對(duì)象的自定義事件，使用方法和DOM事件類似。但請(qǐng)注意，地圖API事件是獨(dú)立的，與標(biāo)準(zhǔn)DOM事件不同。

事件監(jiān)聽(tīng)

　　百度地圖API中的大部分對(duì)象都含有addEventListener方法，您可以通過(guò)該方法來(lái)監(jiān)聽(tīng)對(duì)象事件。例如，BMap.Map包含click、dblclick等事件。在特定環(huán)境下這些事件會(huì)被觸發(fā)，同時(shí)監(jiān)聽(tīng)函數(shù)會(huì)得到相應(yīng)的事件參數(shù)e，比如當(dāng)用戶點(diǎn)擊地圖時(shí)，e參數(shù)會(huì)包含鼠標(biāo)所對(duì)應(yīng)的地理位置point。

　　有關(guān)地圖API對(duì)象的事件，請(qǐng)參考完整的API參考文檔。

　　addEventListener方法有兩個(gè)參數(shù)：監(jiān)聽(tīng)的事件名稱和事件觸發(fā)時(shí)調(diào)用的函數(shù)。在下面示例中，每當(dāng)用戶點(diǎn)擊地圖時(shí)，會(huì)彈出一個(gè)警告框。

  1. var map = new BMap.Map("container");  
  2.  map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  
  3.  map.addEventListener("click", function(){   
  4. alert("您點(diǎn)擊了地圖。"); }); 

　　通過(guò)監(jiān)聽(tīng)事件還可以捕獲事件觸發(fā)后的狀態(tài)。下面示例顯示用戶拖動(dòng)地圖后地圖中心的經(jīng)緯度信息。

  1. var map = new BMap.Map("container");   
  2. map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);   
  3. map.addEventListener("dragend", function(){ var center = map.getCenter();   
  4. alert("地圖中心點(diǎn)變更為：" + center.lng + ", " + center.lat); });   
  5. 事件參數(shù)和this 

　　在標(biāo)準(zhǔn)的DOM事件模型中（DOM Level 2 Events），監(jiān)聽(tīng)函數(shù)會(huì)得到一個(gè)事件對(duì)象e，在e中可以獲取有關(guān)該事件的信息。同時(shí)在監(jiān)聽(tīng)函數(shù)中this會(huì)指向觸發(fā)該事件的DOM元素。 百度地圖API的事件模型與此類似，在事件監(jiān)聽(tīng)函數(shù)中傳遞事件對(duì)象e，每個(gè)e參數(shù)至少包含事件類型（type）和觸發(fā)該事件的對(duì)象（target）。 API還保證函數(shù)內(nèi)的this指向觸發(fā)（同時(shí)也是綁定）事件的API對(duì)象。

　　例如，通過(guò)參數(shù)e得到點(diǎn)擊的經(jīng)緯度坐標(biāo)。

  1. var map = new BMap.Map("container");  
  2.  map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  
  3.  map.addEventListener("click", function(e){   
  4. alert(e.point.lng + ", " + e.point.lat); }); 

　　或者通過(guò)this得到地圖縮放后的級(jí)別。

  1. var map = new BMap.Map("container");   
  2. map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  
  3.  map.addEventListener("zoomend", function(){   
  4. alert("地圖縮放至：" + this.getZoom() + "級(jí)"); });   
  5. 移除監(jiān)聽(tīng)事件 

　　當(dāng)您不再希望監(jiān)聽(tīng)事件時(shí)，可以將事件監(jiān)聽(tīng)進(jìn)行移除。每個(gè)API對(duì)象提供了removeEventListener用來(lái)移除事件監(jiān)聽(tīng)函數(shù)。

　　下面示例中，用戶第一次點(diǎn)擊地圖會(huì)觸發(fā)事件監(jiān)聽(tīng)函數(shù)，在函數(shù)內(nèi)部對(duì)事件監(jiān)聽(tīng)進(jìn)行了移除，因此后續(xù)的點(diǎn)擊操作則不會(huì)觸發(fā)監(jiān)聽(tīng)函數(shù)。

  1. var map = new BMap.Map("container");   
  2. map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);   
  3. function showInfo(e){ alert(e.point.lng + ", " + e.point.lat);   
  4. map.removeEventListener("click", showInfo); } map.addEventListener("click", showInfo);   
  5. 地圖圖層 地圖圖層概念 

　　地圖可以包含一個(gè)或多個(gè)圖層，每個(gè)圖層在每個(gè)級(jí)別都是由若干張圖塊組成的，它們覆蓋了地球的整個(gè)表面。例如您所看到包括街道、興趣點(diǎn)、學(xué)校、公園等內(nèi)容的地圖展現(xiàn)就是一個(gè)圖層，另外交通流量的展現(xiàn)也是通過(guò)圖層來(lái)實(shí)現(xiàn)的。

　　目前百度地圖提供的圖層包括：

　　TrafficLayer：交通流量圖層。

添加和移除圖層

　　通過(guò)map.addTileLayer方法可向地圖添加圖層，例如下面代碼將顯示北京市的交通流量。

var map = new BMap.Map("container"); // 創(chuàng)建地圖實(shí)例 var point = new BMap.Point(116.404, 39.915); // 創(chuàng)建點(diǎn)坐標(biāo) map.centerAndZoom(point, 15); // 初始化地圖，設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別 var traffic = new BMap.TrafficLayer(); // 創(chuàng)建交通流量圖層實(shí)例 map.addTileLayer(traffic); // 將圖層添加到地圖上

　　若要從地圖上移除圖層，需要調(diào)用map.removeTileLayer方法。

map.removeTileLayer(traffic); // 將圖層移除 自定義圖層地圖坐標(biāo)系

　　在使用自定義圖層前，您需要了解百度地圖的地圖坐標(biāo)系，百度地圖坐標(biāo)系涉及：

　　經(jīng)緯度球面坐標(biāo)系統(tǒng)

　　墨卡托平面坐標(biāo)系統(tǒng)

　　圖塊編號(hào)系統(tǒng)

　　經(jīng)緯度是一種利用三維空間的球面來(lái)定義地球上的空間的球面坐標(biāo)系，它能夠標(biāo)示地球上任何一個(gè)位置。通過(guò)倫敦格林尼治天文臺(tái)原址的經(jīng)線為0度經(jīng)線，從0度經(jīng)線向東、向西各分180度。赤道為0度緯線，赤道以北的緯線稱為北緯、以南的稱為南緯。在百度地圖中，東經(jīng)和北緯用正數(shù)標(biāo)示，西經(jīng)和南緯用負(fù)數(shù)標(biāo)示。例如北京的位置大約是北緯39.9度，東經(jīng)116.4度，那么用數(shù)值標(biāo)示就是經(jīng)度116.6，緯度39.9。在百度地圖中，習(xí)慣經(jīng)度在前，緯度在后，例如：

var point = new BMap.Point(116.404, 39.915); // 創(chuàng)建點(diǎn)坐標(biāo)，經(jīng)度在前，緯度在后

　　由于百度地圖是顯示在平面上的，因此在地圖內(nèi)部系統(tǒng)中需要將球面坐標(biāo)轉(zhuǎn)換為平面坐標(biāo)，這個(gè)轉(zhuǎn)換過(guò)程稱為投影。百度地圖使用的是墨卡托投影。墨卡托平面坐標(biāo)如下圖所示，平面坐標(biāo)與經(jīng)緯度坐標(biāo)系的原點(diǎn)是重合的。

　　百度地圖在每一個(gè)級(jí)別將整個(gè)地圖劃分成若干個(gè)圖塊，通過(guò)編號(hào)系統(tǒng)將整個(gè)圖塊整合在一起以便顯示完整的地圖。當(dāng)?shù)貓D被拖動(dòng)或者級(jí)別發(fā)生變化時(shí)，地圖API將會(huì)根據(jù)平面坐標(biāo)計(jì)算出當(dāng)前視野內(nèi)所需顯示的圖塊的編號(hào)。

　　百度地圖圖塊編號(hào)規(guī)則如下圖所示：

　　從平面坐標(biāo)原點(diǎn)開(kāi)始的右上方向的圖塊編號(hào)為0,0，以此類推。在最低的縮放級(jí)別（級(jí)別 1）中，整個(gè)地球由 4 張圖塊組成。隨著級(jí)別的增長(zhǎng)，地圖所使用的圖塊個(gè)數(shù)也隨之增多。

定義取圖規(guī)則

　　通過(guò)TileLayer類開(kāi)發(fā)者可以實(shí)現(xiàn)自定義圖層。其中，TileLayer實(shí)例的getTilesUrl方法需要實(shí)現(xiàn)，用來(lái)告訴API取圖規(guī)則。getTilesUrl方法的參數(shù)包括tileCoord和zoom，其中tileCoord為圖塊的編號(hào)信息，zoom為圖塊的級(jí)別，每當(dāng)?shù)貓D需要顯示特定級(jí)別的特定位置的圖塊時(shí)就會(huì)自動(dòng)調(diào)用此方法，并提供這兩個(gè)參數(shù)。使用者需要告知API特定編號(hào)和級(jí)別所對(duì)應(yīng)的圖塊的地址，這樣API就能正常顯示自定義的圖層了。

添加和移除自定義圖層

　　以下代碼在每個(gè)圖塊的所有縮放級(jí)別上顯示一個(gè)簡(jiǎn)單的透明疊加層，使用浮動(dòng)紅色小水滴表示圖塊的輪廓。

  1. var map = new BMap.Map("container");   
  2. // 創(chuàng)建地圖實(shí)例 var point = new BMap.Point(116.404, 39.915);   
  3. // 創(chuàng)建點(diǎn)坐標(biāo) map.centerAndZoom(point,15);   
  4. // 初始化地圖，設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別   
  5. var tilelayer = new BMap.TileLayer();   
  6. // 創(chuàng)建地圖層實(shí)例 tilelayer.getTilesUrl=function(){   
  7. // 設(shè)置圖塊路徑 return "layer.gif"; };   
  8. map.addTileLayer(tilelayer);   
  9. // 將圖層添加到地圖上 工具 地圖工具概述 

　　百度地圖提供了交互功能更為復(fù)雜的“工具”，它包括：

　　PushpinTool：標(biāo)注工具。通過(guò)此工具用戶可在地圖任意區(qū)域添加標(biāo)注。

　　DistanceTool：測(cè)距工具。通過(guò)此工具用戶可測(cè)量地圖上任意位置之間的距離。

　　DragAndZoomTool：區(qū)域縮放工具。此工具將根據(jù)用戶拖拽繪制的矩形區(qū)域大小對(duì)地圖進(jìn)行放大或縮小操作。

　　工具類在初始化時(shí)需要提供地圖實(shí)例參數(shù)，以便使工具在該地圖上生效。您可以在地圖上添加多個(gè)工具，但同一時(shí)刻只能有一個(gè)工具處于開(kāi)啟狀態(tài)。標(biāo)注工具和測(cè)距工具在完成一次操作后將自動(dòng)退出開(kāi)啟狀態(tài)，而區(qū)域縮放工具可以自行配置是否自動(dòng)關(guān)閉。

向地圖添加工具

　　在地圖正確初始化后，您可以創(chuàng)建工具實(shí)例。下面示例展示了如何向地圖添加一個(gè)標(biāo)注工具。

  1. var map = new BMap.Map("container");  
  2.  map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);  
  3.  var myPushpin = new BMap.PushpinTool(map);  
  4.  // 創(chuàng)建標(biāo)注工具實(shí)例  
  5.  myPushpin.addEventListener("markend", function(e){   
  6. // 監(jiān)聽(tīng)事件，提示標(biāo)注點(diǎn)坐標(biāo)信息 alert("您標(biāo)注的位置：" + e.marker.getPoint().lng + ", " + e.marker.getPoint().lat); });   
  7. myPushpin.open();   
  8. // 開(kāi)啟標(biāo)注工具 通過(guò)按鈕控制工具的開(kāi)啟和關(guān)閉 

　　工具類沒(méi)有提供控制其開(kāi)啟和關(guān)閉的UI元素。您可以根據(jù)需要自己創(chuàng)建這些元素，把它們放置在地圖區(qū)域內(nèi)或者區(qū)域外均可。調(diào)用工具類的open和close可控制工具的開(kāi)啟和關(guān)閉。

　　首先初始化地圖并創(chuàng)建一個(gè)測(cè)距工具實(shí)例：

var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 15); var myDis = new BMap.DistanceTool(map);

　　接著我們創(chuàng)建兩個(gè)按鈕元素并為其添加點(diǎn)擊事件。

<input type="button" value="開(kāi)啟" onclick="myDis.open()" /> <input type="button" value="關(guān)閉" onclick="myDis.close()" /> 拉框放大工具

　　一些工具類提供了可修改的配置參數(shù)，您可參考API文檔來(lái)修改它們以便符合您的要求。

　　本示例為區(qū)域縮放工具添加提示文字。

var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 15); var myDrag = new BMap.DragAndZoomTool(map, { followText : "拖拽鼠標(biāo)進(jìn)行操作" }); 服務(wù) 地圖服務(wù)概述

　　地圖服務(wù)是指那些提供數(shù)據(jù)信息的接口，比如本地搜索、路線規(guī)劃等等。百度地圖API提供的服務(wù)有：

　　LocalSearch：本地搜索，提供某一特定地區(qū)的位置搜索服務(wù)，比如在北京市搜索“公園”。

　　TransitRoute：公交導(dǎo)航，提供某一特定地區(qū)的公交出行方案的搜索服務(wù)。

　　DrivingRoute：駕車導(dǎo)航，提供駕車出行方案的搜索服務(wù)。

　　WalkingRoute：步行導(dǎo)航，提供步行出行方案的搜索服務(wù)。

　　Geocoder：地址解析，提供將地址信息轉(zhuǎn)換為坐標(biāo)點(diǎn)信息的服務(wù)。

　　LocalCity：本地城市，提供自動(dòng)判斷您所在城市的服務(wù)。

　　TrafficControl：實(shí)時(shí)路況控件，提供實(shí)時(shí)和歷史路況信息服務(wù)。

　　搜索類的服務(wù)接口需要指定一個(gè)搜索范圍，否則接口將不能工作。

本地搜索

　　BMap.LocalSearch提供本地搜索服務(wù)，在使用本地搜索時(shí)需要為其設(shè)置一個(gè)檢索區(qū)域，檢索區(qū)域可以是BMap.Map對(duì)象、BMap.Point對(duì)象或者是省市名稱（比如："北京市"）的字符串。BMap.LocalSearch構(gòu)造函數(shù)的第二個(gè)參數(shù)是可選的，您可以在其中指定結(jié)果的呈現(xiàn)。BMap.RenderOptions類提供了若干控制呈現(xiàn)的屬性，其中map指定了結(jié)果所展現(xiàn)的地圖實(shí)例，panel指定了結(jié)果列表的容器元素。

　　下面這個(gè)示例展示了在北京市檢索天安門。搜索區(qū)域設(shè)置為地圖實(shí)例，并告知結(jié)果需要展現(xiàn)在地圖實(shí)例上。

var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); var local = new BMap.LocalSearch(map, { renderOptions:{map: map} }); local.search("天安門");

　　另外，BMap.LocalSearch還提包含searchNearby和searchInBounds方法，為您提供周邊搜索和范圍搜索服務(wù)。

配置搜索

　　BMap.LocalSearch提供了若干配置方法，通過(guò)它們可以自定義搜索服務(wù)的行為以滿足您的需求。

　　在下面的示例中，我們調(diào)整每頁(yè)顯示8個(gè)結(jié)果，并且根據(jù)結(jié)果點(diǎn)位置自動(dòng)調(diào)整地圖視野，不顯示第一條結(jié)果的信息窗口：

var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); var local = new BMap.LocalSearch("北京市", { renderOptions: { map: map, autoViewport: true, selectFirstResult: false }, pageCapacity: 8 }); local.search("中關(guān)村"); 結(jié)果面板

　　通過(guò)設(shè)置BMap.LocalSearchOptions.renderOptions.panel屬性，可以為本地搜索對(duì)象提供一個(gè)結(jié)果列表容器，搜索結(jié)果會(huì)自動(dòng)添加到容器元素中。請(qǐng)看下面示例：

var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); var local = new BMap.LocalSearch(map, { renderOptions: {map: map, panel: "results"} }); local.search("天安門"); 數(shù)據(jù)接口

　　除了搜索結(jié)果會(huì)自動(dòng)添加到地圖和列表外，您還可以通過(guò)數(shù)據(jù)接口獲得詳細(xì)的數(shù)據(jù)信息，結(jié)合地圖API您可以自行向地圖添加標(biāo)注和信息窗口。BMap.LocalSearch和BMap.LocalSearchOptions類提供了若干設(shè)置回調(diào)函數(shù)的接口，通過(guò)它們可得到搜索結(jié)果的數(shù)據(jù)信息。 例如，通過(guò)onSearchComplete回調(diào)函數(shù)參數(shù)可以獲得BMap.LocalResult對(duì)象實(shí)例，它包含了每一次搜索結(jié)果的數(shù)據(jù)信息。 當(dāng)回調(diào)函數(shù)被執(zhí)行時(shí)，您可以使用BMap.LocalSearch.getStatus()方法來(lái)確認(rèn)搜索是否成功或者得到錯(cuò)誤的詳細(xì)信息。

　　在下面這個(gè)示例中，通過(guò)onSearchComplete回調(diào)函數(shù)得到第一頁(yè)每條結(jié)果的標(biāo)題和地址信息，并輸出到頁(yè)面上：

var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); var options = { onSearchComplete: function(results){ if (local.getStatus() == BMAP_STATUS_SUCCESS){ // 判斷狀態(tài)是否正確 var s = ; for (var i = 0; i < results.getCurrentNumPois(); i ++){ s.push(results.getPoi(i).title + ", " + results.getPoi(i).address); } document.getElementById("log").innerHTML = s.join("
"); } } }; var local = new BMap.LocalSearch(map, options); local.search("公園"); 周邊搜索

　　通過(guò)周邊搜索服務(wù)，您可以在某個(gè)地點(diǎn)附近進(jìn)行搜索，也可以在某一個(gè)特定結(jié)果點(diǎn)周圍進(jìn)行搜索。

　　下面示例展示如何在前門附近搜索小吃：

var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); var local = new BMap.LocalSearch(map, { renderOptions:{map: map, autoViewport: true} }); local.searchNearby("小吃", "前門"); 范圍搜索

　　范圍搜索將根據(jù)您提供的視野范圍提供搜索結(jié)果。注意：當(dāng)搜索范圍過(guò)大時(shí)可能會(huì)出現(xiàn)無(wú)結(jié)果的情況。

　　下面示例展示在當(dāng)前地圖視野范圍內(nèi)搜索銀行：

var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); var local = new BMap.LocalSearch(map, { renderOptions:{map: map} }); local.searchInBounds("銀行", map.getBounds()); 公交導(dǎo)航

　　BMap.TransitRoute類提供公交導(dǎo)航搜索服務(wù)。和本地搜索類似，在搜索之前需要指定搜索區(qū)域，注意公交導(dǎo)航的區(qū)域范圍只能是市，而不能是省。如果搜索區(qū)域?yàn)锽Map.Map對(duì)象，路線結(jié)果會(huì)自動(dòng)添加到地圖上。如果您提供了結(jié)果容器，相應(yīng)的路線描述也會(huì)展示在頁(yè)面上。

　　下面示例展示了如何使用公交導(dǎo)航服務(wù)：

var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); var transit = new BMap.TransitRoute(map, { renderOptions: {map: map} }); transit.search("王府井", "西單"); 結(jié)果面板

　　您可以提供用于展示文字結(jié)果的容器元素，方案結(jié)果會(huì)自動(dòng)在頁(yè)面中展現(xiàn)：

var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); var transit = new BMap.TransitRoute(map, { renderOptions: {map: map, panel: "results"} }); transit.search("王府井", "西單"); 數(shù)據(jù)接口

　　您可通過(guò)數(shù)據(jù)接口獲取詳細(xì)的公交方案信息。公交導(dǎo)航搜索結(jié)果用BMap.TransitRouteResult來(lái)表示，其中包含了若干公交出行方案（BMap.TransitRoutePlan）。每條出行方案由步行線路和公交線路組成。 在起點(diǎn)到上車點(diǎn)之間、下車點(diǎn)到終點(diǎn)之間以及每個(gè)換乘站之間都會(huì)存在步行線路，如果上述的某兩點(diǎn)位置重合，那么其間的步行路線長(zhǎng)度為0。

　　在下面示例中，通過(guò)數(shù)據(jù)接口將第一條方案的路線添加到地圖上，并將所有方案的描述信息輸出到頁(yè)面上

 

  1. var map = new BMap.Map("container"); 
  2. map.centerAndZoom(new BMap.Point(116.404, 39.915), 12); 
  3. var transit = new BMap.TransitRoute("北京市");   
  4. transit.setSearchCompleteCallback(function(results){   
  5. if (transit.getStatus() == BMAP_STATUS_SUCCESS){   
  6. var firstPlan = results.getPlan(0);   
  7. // 繪制步行線路   
  8. for (var i = 0; i < firstPlan.getNumRoutes(); i ++){   
  9. var walk = firstPlan.getRoute(i);   
  10. if (walk.getDistance(false) > 0){   
  11. // 步行線路有可能為0   
  12. map.addOverlay(new BMap.Polyline(walk.getPoints(), {lineColor: "green"}));  
  13.  } }   
  14. // 繪制公交線路 for (i = 0; i < firstPlan.getNumLines();   
  15. i ++){ var line = firstPlan.getLine(i);  
  16.  map.addOverlay(new BMap.Polyline(line.getPoints())); }   
  17. // 輸出方案信息 var s = ;   
  18. for (i = 0; i < results.getNumPlans(); i ++){ s.push((i + 1) + ". " + results.getPlan(i).getDescription());   
  19. } document.getElementById("log").innerHTML = s.join("  
  20. "); } }) transit.search("中關(guān)村", "國(guó)貿(mào)橋");  
  21.  駕車導(dǎo)航 

　　BMap.DrivingRoute提供駕車導(dǎo)航服務(wù)。與公交導(dǎo)航不同的是，駕車導(dǎo)航的搜索范圍可以設(shè)置為省。

　　下面示例展示了如何使用駕車導(dǎo)航接口：

var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); var driving = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true } }); driving.search("中關(guān)村", "天安門"); 結(jié)果面板

　　下面示例中，我們提供了結(jié)果面板參數(shù)，方案描述會(huì)自動(dòng)展示到頁(yè)面上。

 

  1. var map = new BMap.Map("container");   
  2. map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);   
  3. var driving = new BMap.DrivingRoute(map, { 
  4. renderOptions: { map : map, panel : "results", autoViewport: true } });   
  5. driving.search("中關(guān)村", "天安門"); 數(shù)據(jù)接口 

　　駕車導(dǎo)航服務(wù)也提供了豐富的數(shù)據(jù)接口，通過(guò)onSearchComplete回調(diào)函數(shù)可以得到BMap.DrivingRouteResult對(duì)象，它包含了駕車導(dǎo)航結(jié)果數(shù)據(jù)信息。 結(jié)果會(huì)包含若干駕車方案（目前僅提供一條方案），每條方案中包含了若干駕車線路（如果導(dǎo)航方案只包含一個(gè)目的地，那么駕車線路的個(gè)數(shù)就為1，如果方案包含若干個(gè)目的地，則駕車線路的個(gè)數(shù)會(huì)大于1。目前API尚不支持多個(gè)目的地的駕車導(dǎo)航）。 每條駕車線路又會(huì)包含一系列的關(guān)鍵步驟（BMap.Step），關(guān)鍵步驟描述了具體駕車行駛方案，可通過(guò)BMap.Step.getDescription()方法獲得。

 

  1. var map = new BMap.Map("container");   
  2. map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);  
  3.  var options = { onSearchComplete: function(results){   
  4. if (driving.getStatus() == BMAP_STATUS_SUCCESS){   
  5. // 獲取第一條方案 var plan = results.getPlan(0);   
  6. // 獲取方案的駕車線路 var route = plan.getRoute(0);   
  7. // 獲取每個(gè)關(guān)鍵步驟，并輸出到頁(yè)面 var s = ;  
  8. for (var i = 0; i < route.getNumSteps(); i ++){   
  9. var step = route.getStep(i);   
  10. s.push((i + 1) + ". " + step.getDescription());  
  11.  } document.getElementById("log").innerHTML = s.join("  
  12. "); } }   
  13. };   
  14. var driving = new BMap.DrivingRoute(map, options);   
  15. driving.search("中關(guān)村", "天安門"); 

　　步行導(dǎo)航接口在使用上與駕車導(dǎo)航一致，具體請(qǐng)參考API文檔。

地理編碼

　　地理編碼能夠?qū)⒌刂沸畔⑥D(zhuǎn)換為地理坐標(biāo)點(diǎn)信息。

根據(jù)地址描述獲得坐標(biāo)

　　百度地圖API提供Geocoder類進(jìn)行地址解析，您可以通過(guò)Geocoder.getPoint()方法來(lái)將一段地址描述轉(zhuǎn)換為一個(gè)坐標(biāo)。

　　在下面的示例中，我們將獲得地址“北京市海淀區(qū)上地10街10號(hào)”的地理坐標(biāo)位置，并在這個(gè)位置上添加一個(gè)標(biāo)注。注意在調(diào)用Geocoder.getPoint()方法時(shí)您需要提供地址解析所在的城市（本例為“北京市”）。

 

  1. var map = new BMap.Map("container");   
  2. map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);   
  3. // 創(chuàng)建地址解析器實(shí)例 var myGeo = new BMap.Geocoder();   
  4. // 將地址解析結(jié)果顯示在地圖上，并調(diào)整地圖視野   
  5. myGeo.getPoint("北京市海淀區(qū)上地10街10號(hào)", function(point){   
  6. if (point) { map.centerAndZoom(point, 16);   
  7. map.addOverlay(new BMap.Marker(point)); } }, "北京市"); 

百度地圖API官方資料站點(diǎn)：http://openapi.baidu.com/map/developer.html

責(zé)任編輯：彭凡 來(lái)源： 百度
百度地圖API
相關(guān)推薦

2011-09-29 11:00:54

百度地圖API

2011-09-16 10:37:42

地圖API

2011-10-21 09:28:25

百度地圖API

2011-09-26 10:05:19

百度地圖API

2011-10-09 11:07:40

百度地圖API

2011-09-16 14:39:02

百度地圖API

2011-10-24 14:01:29

API

2022-03-27 10:04:23

Angular8項(xiàng)目vue

2012-02-01 09:33:36

百度地圖API

2021-06-15 14:33:00

高德百度騰訊

2013-04-08 14:59:54

Android學(xué)習(xí)筆記百度地圖Overlay

2011-10-21 09:11:41

百度地圖API

2011-12-29 16:18:14

API

2014-06-12 09:35:25

設(shè)備定向API移動(dòng)開(kāi)發(fā)

2013-04-08 14:46:42

Android學(xué)習(xí)筆記百度地圖

2013-08-22 17:08:50

2014-07-25 17:12:39

數(shù)據(jù)庫(kù)WOT2014MongoDB

2011-05-25 14:36:17

2012-02-03 14:01:15

地圖

2023-12-20 17:38:44

APIhttp鴻蒙
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)