日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

 
 
 
 
  
  
  
  
 
  
  
  
  
  
  
  
  
 
  
  
  
  
 
  
  
  
  
html{height:100%}body{height:100%;margin:0px;padding:0px}#container{height:100%} 
  
  
  
  
 
  
  
  
  

下面我們分步向您介紹：

準(zhǔn)備頁面

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

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

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

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

 
 
 
 
  
  
  
  
　   
  
  
  
  
html{height:100%}　   
  
  
  
  
body{height:100%;margin:0px;padding:0px}　   
  
  
  
  
#container{height:100%}　   
  
  
  
  
引用百度地圖API文件   
  
  
  
  
創(chuàng)建地圖容器元素 
 
 
 

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

命名空間

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

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

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

注意在調(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類來創(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í)例后，我們需要對其進(jìn)行初始化，BMap.Map.centerAndZoom()方法要求設(shè)置中心點(diǎn)坐標(biāo)和地圖級別。地圖必須經(jīng)過初始化才可以執(zhí)行其他操作。

地圖配置與操作

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

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

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

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

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

地圖API中提供的控件有：

Control：控件的抽象基類，所有控件均繼承此類的方法、屬性。通過此類您可實(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è)縮略圖控件。在地圖中添加控件后，它們即刻生效。

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

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

控件停靠位置

anchor表示控件的?？课恢茫纯丶？吭诘貓D的哪個(gè)角。當(dāng)?shù)貓D尺寸發(fā)生變化時(shí)，控件會根據(jù)?？课恢玫牟煌瑏碚{(diào)整自己的位置。anchor允許的值為：

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

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

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

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

控件位置偏移

除了指定停靠位置外，還可以通過偏移量來指示控件距離地圖邊界有多少像素。如果兩個(gè)控件的?？课恢孟嗤?，那么控件可能會重疊在一起，這時(shí)就可以通過偏移值使二者分開顯示。

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

地圖API的控件提供了豐富的配置參數(shù)，您可參考API文檔來修改它們以便得到符合要求的控件外觀。例如，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允許您通過繼承Control來創(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è)級別。它具有文本標(biāo)識，而不是平移縮放控件中使用的圖形圖標(biāo)。

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

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

 
 
 
 
  
  
  
  
// 自定義控件必須實(shí)現(xiàn)initialize方法，并且將控件的DOM元素返回  
  
  
  
  
 // 在本方法中創(chuàng)建個(gè)div元素作為控件的容器，并將其添加到地圖容器中 
  
  
  
  
ZoomControl.prototype.initialize = function(map){   
  
  
  
  
// 創(chuàng)建一個(gè)DOM元素 var div = document.createElement("div");   
  
  
  
  
// 添加文字說明 div.appendChild(document.createTextNode("放大2級"));  
  
  
  
  
 // 設(shè)置樣式 div.style.cursor = "pointer"; 
  
  
  
  
div.style.border = "1px solid gray"; 
  
  
  
  
div.style.backgroundColor = "white";   
  
  
  
  
// 綁定事件，點(diǎn)擊一次放大兩級 div.onclick = function(e){ map.zoomTo(map.getZoom() + 2); }   
  
  
  
  
// 添加DOM元素到地圖中 map.getContainer().appendChild(div);   
  
  
  
  
// 將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í)，它們會相應(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è)信息窗口在地圖上打開。

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

標(biāo)注

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

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

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

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

 
 
 
 
  
  
  
  
var map = new BMap.Map("container"); 
  
  
  
  
var point = new BMap.Point(116.404, 39.915); 
  
  
  
  
map.centerAndZoom(point, 15); // 編寫自定義函數(shù)，創(chuàng)建標(biāo)注 
  
  
  
  
function addMarker(point, index){ 
  
  
  
  
// 創(chuàng)建圖標(biāo)對象 
  
  
  
  
var myIcon = new BMap.Icon("markers.png", new BMap.Size(23, 25),  
  
  
  
  
 { // 指定定位位置。   
  
  
  
  
// 當(dāng)標(biāo)注顯示在地圖上時(shí)，其所指向的地理位置距離圖標(biāo)左上  
  
  
  
  
 // 角各偏移10像素和25像素。您可以看到在本例中該位置即是   
  
  
  
  
// 圖標(biāo)中央下端的尖角位置。 offset: new BMap.Size(10, 25), // 設(shè)置圖片偏移。   
  
  
  
  
// 當(dāng)您需要從一幅較大的圖片中截取某部分作為標(biāo)注圖標(biāo)時(shí)，您   
  
  
  
  
// 需要指定大圖的偏移位置，此做法與css sprites技術(shù)類似。 
  
  
  
  
imageOffset: new BMap.Size(0, 0 - index * 25)   
  
  
  
  
// 設(shè)置圖片偏移 });   
  
  
  
  
// 創(chuàng)建標(biāo)注對象并添加到地圖   
  
  
  
  
var marker = new BMap.Marker(point, {icon: myIcon});   
  
  
  
  
map.addOverlay(marker); } // 隨機(jī)向地圖添加10個(gè)標(biāo)注   
  
  
  
  
var bounds = map.getBounds();   
  
  
  
  
var lngSpan = bounds.maxX - bounds.minX;  
  
  
  
  
 var latSpan = bounds.maxY - bounds.minY;   
  
  
  
  
for (var i = 0;   
  
  
  
  
i < 10; i ++) { 
  
  
  
  
var point = new BMap.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事件機(jī)制相同?？蓞⒖际录糠?。

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

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

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

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

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

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

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

 
 
 
 
  
  
  
  
var opts = { width : 250,   
  
  
  
  
// 信息窗口寬度   
  
  
  
  
height: 100,   
  
  
  
  
// 信息窗口高度   
  
  
  
  
title : "Hello"   
  
  
  
  
// 信息窗口標(biāo)題 }   
  
  
  
  
var infoWindow = new BMap.InfoWindow("World", opts);   
  
  
  
  
// 創(chuàng)建信息窗口對象   
  
  
  
  
map.openInfoWindow(infoWindow, map.getCenter());   
  
  
  
  
// 打開信息窗口 折線 
 
 
 

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

添加折線

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

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

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

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

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

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

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

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

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

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

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

首先您需要定義自定義覆蓋物的構(gòu)造函數(shù)，在下面的示例中我們定義一個(gè)名為SquareOverlay的構(gòu)造函數(shù)，它包含中心點(diǎn)和邊長兩個(gè)參數(shù)，用來在地圖上創(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會調(diào)用該對象的initialize方法用來初始化覆蓋物，在初始化過程中需要?jiǎng)?chuàng)建覆蓋物所需要的DOM元素，并添加到地圖相應(yīng)的容器中。

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

floatPane

markerMouseTarget

floatShadow

labelPane

markerPane

mapPane

這些對象代表了不同的覆蓋物容器元素，它們之間存在著覆蓋關(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對象實(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方法，或者對覆蓋物進(jìn)行移除時(shí)，API都將操作此元素。 return div; }繪制覆蓋物

到目前為止，我們僅僅把覆蓋物添加到了地圖上，但是并沒有將它放置在正確的位置上。您需要在draw方法中設(shè)置覆蓋物的位置，每當(dāng)?shù)貓D狀態(tài)發(fā)生變化（比如：位置移動(dòng)、級別變化）時(shí)，API都會調(diào)用覆蓋物的draw方法，用于重新計(jì)算覆蓋物的位置。通過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會自動(dòng)將initialize方法返回的DOM元素進(jìn)行移除。

顯示和隱藏覆蓋物

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

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

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

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

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

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

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

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

事件監(jiān)聽

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

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

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

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

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

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

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

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

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

或者通過this得到地圖縮放后的級別。

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

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

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

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

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

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

TrafficLayer：交通流量圖層。

添加和移除圖層

通過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)和地圖級別 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)

圖塊編號系統(tǒng)

經(jīng)緯度是一種利用三維空間的球面來定義地球上的空間的球面坐標(biāo)系，它能夠標(biāo)示地球上任何一個(gè)位置。通過倫敦格林尼治天文臺原址的經(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)換過程稱為投影。百度地圖使用的是墨卡托投影。墨卡托平面坐標(biāo)如下圖所示，平面坐標(biāo)與經(jīng)緯度坐標(biāo)系的原點(diǎn)是重合的。

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

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

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

定義取圖規(guī)則

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

添加和移除自定義圖層

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

 
 
 
 
  
  
  
  
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)和地圖級別   
  
  
  
  
var tilelayer = new BMap.TileLayer();   
  
  
  
  
// 創(chuàng)建地圖層實(shí)例 tilelayer.getTilesUrl=function(){   
  
  
  
  
// 設(shè)置圖塊路徑 return "layer.gif"; };   
  
  
  
  
map.addTileLayer(tilelayer);   
  
  
  
  
// 將圖層添加到地圖上 工具 地圖工具概述 
 
 
 

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

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

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

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

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

向地圖添加工具

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

 
 
 
 
  
  
  
  
var map = new BMap.Map("container");  
  
  
  
  
 map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);  
  
  
  
  
 var myPushpin = new BMap.PushpinTool(map);  
  
  
  
  
 // 創(chuàng)建標(biāo)注工具實(shí)例  
  
  
  
  
 myPushpin.addEventListener("markend", function(e){   
  
  
  
  
// 監(jiān)聽事件，提示標(biāo)注點(diǎn)坐標(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)建這些元素，把它們放置在地圖區(qū)域內(nèi)或者區(qū)域外均可。調(diào)用工具類的open和close可控制工具的開啟和關(guān)閉。

首先初始化地圖并創(chuàng)建一個(gè)測距工具實(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)擊事件。

拉框放大工具

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

本示例為區(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對象、BMap.Point對象或者是省市名稱（比如："北京市"）的字符串。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提供了若干配置方法，通過它們可以自定義搜索服務(wù)的行為以滿足您的需求。

在下面的示例中，我們調(diào)整每頁顯示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é)果面板

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

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

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("公園"); 周邊搜索

通過周邊搜索服務(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)搜索范圍過大時(shí)可能會出現(xiàn)無結(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對象，路線結(jié)果會自動(dòng)添加到地圖上。如果您提供了結(jié)果容器，相應(yīng)的路線描述也會展示在頁面上。

下面示例展示了如何使用公交導(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é)果會自動(dòng)在頁面中展現(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ù)接口

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

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

 
 
 
 
  
  
  
  
var map = new BMap.Map("container"); 
  
  
  
  
map.centerAndZoom(new BMap.Point(116.404, 39.915), 12); 
  
  
  
  
var transit = new BMap.TransitRoute("北京市");   
  
  
  
  
transit.setSearchCompleteCallback(function(results){   
  
  
  
  
if (transit.getStatus() == BMAP_STATUS_SUCCESS){   
  
  
  
  
var firstPlan = results.getPlan(0);   
  
  
  
  
// 繪制步行線路   
  
  
  
  
for (var i = 0; i < firstPlan.getNumRoutes(); i ++){   
  
  
  
  
var walk = firstPlan.getRoute(i);   
  
  
  
  
if (walk.getDistance(false) > 0){   
  
  
  
  
// 步行線路有可能為0   
  
  
  
  
map.addOverlay(new BMap.Polyline(walk.getPoints(), {lineColor: "green"}));  
  
  
  
  
 } }   
  
  
  
  
// 繪制公交線路 for (i = 0; i < firstPlan.getNumLines();   
  
  
  
  
i ++){ var line = firstPlan.getLine(i);  
  
  
  
  
 map.addOverlay(new BMap.Polyline(line.getPoints())); }   
  
  
  
  
// 輸出方案信息 var s = ;   
  
  
  
  
for (i = 0; i < results.getNumPlans(); i ++){ s.push((i + 1) + ". " + results.getPlan(i).getDescription());   
  
  
  
  
} document.getElementById("log").innerHTML = s.join("  
  
  
  
  
"); } }) transit.search("中關(guān)村", "國貿(mào)橋");  
  
  
  
  
 駕車導(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ù)，方案描述會自動(dòng)展示到頁面上。

 
 
 
 
  
  
  
  
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, panel : "results", autoViewport: true } });   
  
  
  
  
driving.search("中關(guān)村", "天安門"); 數(shù)據(jù)接口 
 
 
 

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

 
 
 
 
  
  
  
  
var map = new BMap.Map("container");   
  
  
  
  
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);  
  
  
  
  
 var options = { onSearchComplete: funct                                                

                                                網(wǎng)站標(biāo)題：百度地圖API開發(fā)指南                                                

                                                網(wǎng)站鏈接：http://m.5511xx.com/article/cdopddd.html