百度地图API开发指南
百度地圖API開發(fā)指南
?
本文為百度地圖API官方版本的開發(fā)指南，供各位51CTO的網(wǎng)友進(jìn)行參考。
簡介什么是百度地圖API？
百度地圖API是一套由JavaScript語言編寫的應(yīng)用程序接口，它能夠幫助您在網(wǎng)站中構(gòu)建功能豐富、交互性強的地圖應(yīng)用。百度地圖API包含了構(gòu)建地圖基本功能的各種接口，提供了諸如本地搜索、路線規(guī)劃等數(shù)據(jù)服務(wù)。
面向的讀者
API是提供給那些具有一定JavaScript編程經(jīng)驗和了解面向?qū)ο蟾拍畹淖x者使用。此外，讀者還應(yīng)該對地圖產(chǎn)品有一定的了解。
您在使用中遇到任何問題，都可以通過API貼吧或交流群反饋給我們。
獲取API
地圖API是由JavaScript語言編寫的，您在使用之前需要通過<script>標(biāo)簽將API引用到頁面中：
其中參數(shù)v為API當(dāng)前的版本號，目前最新版本為1.2。在1.2版本之前您還可以設(shè)置services參數(shù)，以告知API是否加載服務(wù)部分，true表示加載，false表示不加載，默認(rèn)為true。
開發(fā)移動平臺上的地圖應(yīng)用
API自1.1版本起開始支持iPhone、Android這樣的移動平臺。用戶通過手機瀏覽器就可以訪問由地圖API創(chuàng)建出來的應(yīng)用。移動平臺的屏幕尺寸通常比PC或筆記本要小，操作方式也有所不同。為了更好的在手機瀏覽器上展示地圖，我們有如下建議：
將地圖容器高設(shè)置為100%，使其充滿整個屏幕，或者您也可以計算瀏覽器窗口的大小并進(jìn)行設(shè)置。添加下面的meta標(biāo)簽： <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />這樣做是為了讓頁面以正常比例進(jìn)行顯示并且禁止用戶縮放頁面的操作。
您可以參考 Apple's Developer documentation 和 Android documentation 獲得更多信息。
異步加載
API 1.1和1.2版本支持異步加載，您可以在引用腳本的時候添加callback參數(shù)，當(dāng)腳本加載完成后callback函數(shù)會被立刻調(diào)用。請參考下面的使用示例：
瀏覽器：IE 6.0+、Firefox 3.6+、Opera 9.0+、Safari 3.0+、Chrome
操作系統(tǒng)：Windows、Mac、Linux
移動平臺：iPhone、Android
版本說明
地址 http://api.map.baidu.com/api?v=1.2 中的參數(shù)v表示您加載API的版本，例如當(dāng)前API的最新版本為1.2，則您可在地址中添加 v=1.2。當(dāng)API升級后，如果已有接口在使用、命名等方面發(fā)生了變化，我們會為其增加一個新的版本號，這不會對您現(xiàn)有的應(yīng)用造成任何影響。如果升級只是修復(fù)一些bug或者在不影響現(xiàn)有功能的前提下增加接口、改善性能，則版本號不會發(fā)生變化。您可以在更新日志頁面查看版本的變化。
問題解答
如果您在使用百度地圖API中遇到問題，請嘗試通過以下途徑解決：
確認(rèn)您使用了正確的地圖API地址。訪問百度地圖API吧，查找相關(guān)問題的帖子，或者將您的問題發(fā)布到貼吧中。基礎(chǔ)知識 百度地圖的“Hello, World”
開始學(xué)習(xí)百度地圖API最簡單的方式是看一個簡單的示例。以下代碼創(chuàng)建了一個地圖并以天安門作為地圖的中心：
下面我們分步向您介紹：
準(zhǔn)備頁面
根據(jù)HTML標(biāo)準(zhǔn)，每一份HTML文檔都應(yīng)該聲明正確的文檔類型，我們建議您使用最新的符合HTML5規(guī)范的文檔聲明：
<!DOCTYPE html>
您也可以根據(jù)需要選擇其他類型的文檔聲明，這樣瀏覽器會以標(biāo)準(zhǔn)的方式對頁面進(jìn)行渲染，保證頁面最大的兼容性。我們不建議您使用quirks模式進(jìn)行開發(fā)。
下面我們添加一個meta標(biāo)簽，以便使您的頁面更好的在移動平臺上展示。
接著我們設(shè)置樣式，使地圖充滿整個瀏覽器窗口：
地圖需要一個HTML元素作為容器，這樣才能展現(xiàn)到頁面上。這里我們創(chuàng)建了一個div元素。
命名空間
API使用BMap作為命名空間，所有類均在該命名空間之下，比如：BMap.Map、BMap.Control、BMap.Overlay。
創(chuàng)建地圖實例 var map = new BMap.Map("container");
位于BMap命名空間下的Map類表示地圖，通過new操作符可以創(chuàng)建一個地圖實例。其參數(shù)可以是元素id也可以是元素對象。
注意在調(diào)用此構(gòu)造函數(shù)時應(yīng)確保容器元素已經(jīng)添加到地圖上。
創(chuàng)建點坐標(biāo) var point = new BMap.Point(116.404, 39.915);
這里我們使用BMap命名空間下的Point類來創(chuàng)建一個坐標(biāo)點。Point類描述了一個地理坐標(biāo)點，其中116.404表示經(jīng)度，39.915表示緯度。
地圖初始化map.centerAndZoom(point, 15);
在創(chuàng)建地圖實例后，我們需要對其進(jìn)行初始化，BMap.Map.centerAndZoom()方法要求設(shè)置中心點坐標(biāo)和地圖級別。地圖必須經(jīng)過初始化才可以執(zhí)行其他操作。
地圖配置與操作
地圖被實例化并完成初始化以后，就可以與其進(jìn)行交互了。API中的地圖對象的外觀與行為與百度地圖網(wǎng)站上交互的地圖非常相似。它支持鼠標(biāo)拖拽、滾輪縮放、雙擊放大等交互功能。您也可以修改配置來改變這些功能。比如，默認(rèn)情況下地圖不支持鼠標(biāo)滾輪縮放操作，因為這樣可能會影響整個頁面的用戶體驗，但是如果您希望在地圖中使用鼠標(biāo)滾輪控制縮放，則可以調(diào)用map.enableScrollWheelZoom方法來開啟。配置選項可以在Map類參考的配置方法一節(jié)中找到。
此外，您還可以通過編程的方式與地圖交互。Map類提供了若干修改地圖狀態(tài)的方法。例如：setCenter()、panTo()、zoomTo()等等。
下面示例顯示一個地圖，等待兩秒鐘后，它會移動到新中心點。panTo()方法將讓地圖平滑移動至新中心點，如果移動距離超過了當(dāng)前地圖區(qū)域大小，則地圖會直跳到該點。
百度地圖上負(fù)責(zé)與地圖交互的UI元素稱為控件。百度地圖API中提供了豐富的控件，您還可以通過Control類來實現(xiàn)自定義控件。
地圖API中提供的控件有：
Control：控件的抽象基類，所有控件均繼承此類的方法、屬性。通過此類您可實現(xiàn)自定義控件。
NavigationControl：地圖平移縮放控件，默認(rèn)位于地圖左上方，它包含控制地圖的平移和縮放的功能。
OverviewMapControl：縮略地圖控件，默認(rèn)位于地圖右下方，是一個可折疊的縮略地圖。
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());
可以向地圖添加多個控件。在本例中我們向地圖添加一個平移縮放控件、一個比例尺控件和一個縮略圖控件。在地圖中添加控件后，它們即刻生效。
初始化控件時，可提供一個可選參數(shù)，其中的anchor和offset屬性共同控制控件在地圖上的位置。
控件停靠位置
anchor表示控件的停靠位置，即控件停靠在地圖的哪個角。當(dāng)?shù)貓D尺寸發(fā)生變化時，控件會根據(jù)停靠位置的不同來調(diào)整自己的位置。anchor允許的值為：
BMAP_ANCHOR_TOP_LEFT 表示控件定位于地圖的左上角。
BMAP_ANCHOR_TOP_RIGHT 表示控件定位于地圖的右上角。
BMAP_ANCHOR_BOTTOM_LEFT 表示控件定位于地圖的左下角。
BMAP_ANCHOR_BOTTOM_RIGHT 表示控件定位于地圖的右下角。
?
控件位置偏移
除了指定停靠位置外，還可以通過偏移量來指示控件距離地圖邊界有多少像素。如果兩個控件的停靠位置相同，那么控件可能會重疊在一起，這時就可以通過偏移值使二者分開顯示。
地圖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)建自定義地圖控件。
要創(chuàng)建可用的自定義控件，您需要做以下工作：
定義一個自定義控件的構(gòu)造函數(shù)。
設(shè)置自定義控件構(gòu)造函數(shù)的prototype屬性為Control的實例，以便繼承控件基類。
實現(xiàn)initialize()方法并提供defaultAnchor和defaultOffset屬性。
定義構(gòu)造函數(shù)并繼承Control
首先您需要定義自定義控件的構(gòu)造函數(shù)，并在構(gòu)造函數(shù)中提供defaultAnchor和defaultOffset兩個屬性，以便API正確定位控件位置，接著讓其繼承于Control。在下面的示例中我們定義一個名為ZoomControl的控件，每一次點擊將地圖放大兩個級別。它具有文本標(biāo)識，而不是平移縮放控件中使用的圖形圖標(biāo)。
當(dāng)調(diào)用map.addControl()方法添加自定義控件時，API會調(diào)用該對象的initialize()方法用來初始化控件，您需要實現(xiàn)此方法并在其中創(chuàng)建控件所需的DOM元素，并添加DOM事件。所有自定義控件中的DOM元素最終都應(yīng)該添加到地圖容器（即地圖所在的DOM元素）中去，地圖容器可以通過map.getContainer()方法獲得。最后initialize()方法需要返回控件容器的DOM元素。
添加自定義控件與添加其他控件方法一致，調(diào)用map.addControl()方法即可。
// 創(chuàng)建控件實例 var myZoomCtrl = new ZoomControl(); // 添加到地圖當(dāng)中 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：表示地圖上的多邊形。多邊形類似于閉合的折線，另外您也可以為其添加填充顏色。
Circle: 表示地圖上的圓。
InfoWindow：信息窗口也是一種特殊的覆蓋物，它可以展示更為豐富的文字和多媒體信息。注意：同一時刻只能有一個信息窗口在地圖上打開。
可以使用map.addOverlay方法向地圖添加覆蓋物，使用map.removeOverlay方法移除覆蓋物，注意此方法不適用于InfoWindow。
標(biāo)注
標(biāo)注表示地圖上的點。API提供了默認(rèn)圖標(biāo)樣式，您也可以通過Icon類來指定自定義圖標(biāo)。Marker的構(gòu)造函數(shù)的參數(shù)為Point和MarkerOptions（可選）。注意：當(dāng)您使用自定義圖標(biāo)時，標(biāo)注的地理坐標(biāo)點將位于標(biāo)注所用圖標(biāo)的中心位置，您可通過Icon的offset屬性修改標(biāo)定位置。
下面的示例向地圖中心點添加了一個標(biāo)注，并使用默認(rèn)的標(biāo)注樣式。
通過Icon類可實現(xiàn)自定義標(biāo)注的圖標(biāo)，下面示例通過參數(shù)MarkerOptions的icon屬性進(jìn)行設(shè)置，您也可以使用marker.setIcon()方法。
事件方法與Map事件機制相同。可參考事件部分。
marker的enableDragging和disableDragging方法可用來開啟和關(guān)閉標(biāo)注的拖拽功能。默認(rèn)情況下標(biāo)注不支持拖拽，您需要調(diào)用marker.enableDragging()方法來開啟拖拽功能。在標(biāo)注開啟拖拽功能后，您可以監(jiān)聽標(biāo)注的dragend事件來捕獲拖拽后標(biāo)注的最新位置。
在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會自動幫助您完成此工作。
例如，您可以在標(biāo)注被移除后調(diào)用此方法：
信息窗口在地圖上方的浮動顯示HTML內(nèi)容。信息窗口可直接在地圖上的任意位置打開，也可以在標(biāo)注對象上打開（此時信息窗口的坐標(biāo)與標(biāo)注的坐標(biāo)一致）。 您可以使用InfoWindow來創(chuàng)建一個信息窗實例，注意同一時刻地圖上只能有一個信息窗口處于打開狀態(tài)。
Polyline表示地圖上的折線覆蓋物。它包含一組點，并將這些點連接起來形成折線。
添加折線
折線在地圖上繪制為一系列直線段。可以自定義這些線段的顏色、粗細(xì)和透明度。顏色可以是十六進(jìn)制數(shù)字形式（比如：#ff0000）或者是顏色關(guān)鍵字（比如：red）。
Polyline的繪制需要瀏覽器支持矢量繪制功能。在Internet Explorer中，地圖使用VML繪制折線；在其他瀏覽器中使用SVG或者Canvas
以下代碼段會在兩點之間創(chuàng)建6像素寬的藍(lán)色折線：
API自1.1版本起支持用戶自定義覆蓋物。
要創(chuàng)建自定義覆蓋物，您需要做以下工作：
定義一個自定義覆蓋物的構(gòu)造函數(shù)，通過構(gòu)造函數(shù)參數(shù)可以傳遞一些自由的變量。
設(shè)置自定義覆蓋物對象的prototype屬性為Overlay的實例，以便繼承覆蓋物基類。
實現(xiàn)initialize方法，當(dāng)調(diào)用map.addOverlay方法時，API會調(diào)用此方法。
實現(xiàn)draw方法。
定義構(gòu)造函數(shù)并繼承Overlay
首先您需要定義自定義覆蓋物的構(gòu)造函數(shù)，在下面的示例中我們定義一個名為SquareOverlay的構(gòu)造函數(shù)，它包含中心點和邊長兩個參數(shù)，用來在地圖上創(chuàng)建一個方形覆蓋物。
// 定義自定義覆蓋物的構(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方法添加自定義覆蓋物時，API會調(diào)用該對象的initialize方法用來初始化覆蓋物，在初始化過程中需要創(chuàng)建覆蓋物所需要的DOM元素，并添加到地圖相應(yīng)的容器中。
地圖提供了若干容器供覆蓋物展示，通過map.getPanes方法可以得到這些容器元素，它們包括：
floatPane
markerMouseTarget
floatShadow
labelPane
markerPane
mapPane
這些對象代表了不同的覆蓋物容器元素，它們之間存在著覆蓋關(guān)系，最上一層為floatPane，用于顯示信息窗口內(nèi)容，下面依次為標(biāo)注點擊區(qū)域?qū)印⑿畔⒋翱陉幱皩印⑽谋緲?biāo)注層、標(biāo)注層和矢量圖形層。
我們自定義的方形覆蓋物可以添加到任意圖層上，這里我們選擇添加到markerPane上，作為其一個子結(jié)點。
// 實現(xiàn)初始化方法 SquareOverlay.prototype.initialize = function(map){ // 保存map對象實例 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實例 this._div = div; // 需要將div元素作為方法的返回值，當(dāng)調(diào)用該覆蓋物的show、 // hide方法，或者對覆蓋物進(jìn)行移除時，API都將操作此元素。 return div; }繪制覆蓋物
到目前為止，我們僅僅把覆蓋物添加到了地圖上，但是并沒有將它放置在正確的位置上。您需要在draw方法中設(shè)置覆蓋物的位置，每當(dāng)?shù)貓D狀態(tài)發(fā)生變化（比如：位置移動、級別變化）時，API都會調(diào)用覆蓋物的draw方法，用于重新計算覆蓋物的位置。通過map.pointToOverlayPixel方法可以將地理坐標(biāo)轉(zhuǎn)換到覆蓋物的所需要的像素坐標(biāo)。
// 實現(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方法時，API會自動將initialize方法返回的DOM元素進(jìn)行移除。
顯示和隱藏覆蓋物
自定義覆蓋物會自動繼承Overlay的show和hide方法，方法會修改由initialize方法返回的DOM元素的style.display屬性。如果自定義覆蓋物元素較為復(fù)雜，您也可以自己實現(xiàn)show和hide方法。
通過構(gòu)造函數(shù)的prototype屬性，您可以添加任何自定義的方法，比如下面這個方法每調(diào)用一次就能改變覆蓋物的顯示狀態(tài)：
您現(xiàn)在已經(jīng)完成了一個完整的自定義覆蓋物的編寫，可以添加到地圖上了。
瀏覽器中的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包含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)用戶點擊地圖時，會彈出一個警告框。
通過監(jiān)聽事件還可以捕獲事件觸發(fā)后的狀態(tài)。下面示例顯示用戶拖動地圖后地圖中心的經(jīng)緯度信息。
在標(biāo)準(zhǔn)的DOM事件模型中（DOM Level 2 Events），監(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)。
或者通過this得到地圖縮放后的級別。
當(dāng)您不再希望監(jiān)聽事件時，可以將事件監(jiān)聽進(jìn)行移除。每個API對象提供了removeEventListener用來移除事件監(jiān)聽函數(shù)。
下面示例中，用戶第一次點擊地圖會觸發(fā)事件監(jiān)聽函數(shù)，在函數(shù)內(nèi)部對事件監(jiān)聽進(jìn)行了移除，因此后續(xù)的點擊操作則不會觸發(fā)監(jiān)聽函數(shù)。
地圖可以包含一個或多個圖層，每個圖層在每個級別都是由若干張圖塊組成的，它們覆蓋了地球的整個表面。例如您所看到包括街道、興趣點、學(xué)校、公園等內(nèi)容的地圖展現(xiàn)就是一個圖層，另外交通流量的展現(xiàn)也是通過圖層來實現(xiàn)的。
目前百度地圖提供的圖層包括：
TrafficLayer：交通流量圖層。
添加和移除圖層
通過map.addTileLayer方法可向地圖添加圖層，例如下面代碼將顯示北京市的交通流量。
var map = new BMap.Map("container"); // 創(chuàng)建地圖實例 var point = new BMap.Point(116.404, 39.915); // 創(chuàng)建點坐標(biāo) map.centerAndZoom(point, 15); // 初始化地圖，設(shè)置中心點坐標(biāo)和地圖級別 var traffic = new BMap.TrafficLayer(); // 創(chuàng)建交通流量圖層實例 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)示地球上任何一個位置。通過倫敦格林尼治天文臺原址的經(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)建點坐標(biāo)，經(jīng)度在前，緯度在后
由于百度地圖是顯示在平面上的，因此在地圖內(nèi)部系統(tǒng)中需要將球面坐標(biāo)轉(zhuǎn)換為平面坐標(biāo)，這個轉(zhuǎn)換過程稱為投影。百度地圖使用的是墨卡托投影。墨卡托平面坐標(biāo)如下圖所示，平面坐標(biāo)與經(jīng)緯度坐標(biāo)系的原點是重合的。
?
百度地圖在每一個級別將整個地圖劃分成若干個圖塊，通過編號系統(tǒng)將整個圖塊整合在一起以便顯示完整的地圖。當(dāng)?shù)貓D被拖動或者級別發(fā)生變化時，地圖API將會根據(jù)平面坐標(biāo)計算出當(dāng)前視野內(nèi)所需顯示的圖塊的編號。
百度地圖圖塊編號規(guī)則如下圖所示：
?
從平面坐標(biāo)原點開始的右上方向的圖塊編號為0,0，以此類推。在最低的縮放級別（級別 1）中，整個地球由 4 張圖塊組成。隨著級別的增長，地圖所使用的圖塊個數(shù)也隨之增多。
定義取圖規(guī)則
通過TileLayer類開發(fā)者可以實現(xiàn)自定義圖層。其中，TileLayer實例的getTilesUrl方法需要實現(xiàn)，用來告訴API取圖規(guī)則。getTilesUrl方法的參數(shù)包括tileCoord和zoom，其中tileCoord為圖塊的編號信息，zoom為圖塊的級別，每當(dāng)?shù)貓D需要顯示特定級別的特定位置的圖塊時就會自動調(diào)用此方法，并提供這兩個參數(shù)。使用者需要告知API特定編號和級別所對應(yīng)的圖塊的地址，這樣API就能正常顯示自定義的圖層了。
添加和移除自定義圖層
以下代碼在每個圖塊的所有縮放級別上顯示一個簡單的透明疊加層，使用浮動紅色小水滴表示圖塊的輪廓。
百度地圖提供了交互功能更為復(fù)雜的“工具”，它包括：
PushpinTool：標(biāo)注工具。通過此工具用戶可在地圖任意區(qū)域添加標(biāo)注。
DistanceTool：測距工具。通過此工具用戶可測量地圖上任意位置之間的距離。
DragAndZoomTool：區(qū)域縮放工具。此工具將根據(jù)用戶拖拽繪制的矩形區(qū)域大小對地圖進(jìn)行放大或縮小操作。
工具類在初始化時需要提供地圖實例參數(shù)，以便使工具在該地圖上生效。您可以在地圖上添加多個工具，但同一時刻只能有一個工具處于開啟狀態(tài)。標(biāo)注工具和測距工具在完成一次操作后將自動退出開啟狀態(tài)，而區(qū)域縮放工具可以自行配置是否自動關(guān)閉。
向地圖添加工具
在地圖正確初始化后，您可以創(chuàng)建工具實例。下面示例展示了如何向地圖添加一個標(biāo)注工具。
工具類沒有提供控制其開啟和關(guān)閉的UI元素。您可以根據(jù)需要自己創(chuàng)建這些元素，把它們放置在地圖區(qū)域內(nèi)或者區(qū)域外均可。調(diào)用工具類的open和close可控制工具的開啟和關(guān)閉。
首先初始化地圖并創(chuàng)建一個測距工具實例：
var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 15); var myDis = new BMap.DistanceTool(map);
接著我們創(chuàng)建兩個按鈕元素并為其添加點擊事件。
<input type="button" value="開啟" οnclick="myDis.open()" /> <input type="button" value="關(guān)閉" οnclick="myDis.close()" /> 拉框放大工具
一些工具類提供了可修改的配置參數(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)點信息的服務(wù)。
LocalCity：本地城市，提供自動判斷您所在城市的服務(wù)。
TrafficControl：實時路況控件，提供實時和歷史路況信息服務(wù)。
搜索類的服務(wù)接口需要指定一個搜索范圍，否則接口將不能工作。
本地搜索
BMap.LocalSearch提供本地搜索服務(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)在地圖實例上。
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個結(jié)果，并且根據(jù)結(jié)果點位置自動調(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屬性，可以為本地搜索對象提供一個結(jié)果列表容器，搜索結(jié)果會自動添加到容器元素中。請看下面示例：
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é)果會自動添加到地圖和列表外，您還可以通過數(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對象實例，它包含了每一次搜索結(jié)果的數(shù)據(jù)信息。當(dāng)回調(diào)函數(shù)被執(zhí)行時，您可以使用BMap.LocalSearch.getStatus()方法來確認(rèn)搜索是否成功或者得到錯誤的詳細(xì)信息。
在下面這個示例中，通過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ù)，您可以在某個地點附近進(jìn)行搜索，也可以在某一個特定結(jié)果點周圍進(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)搜索范圍過大時可能會出現(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ū)域為BMap.Map對象，路線結(jié)果會自動添加到地圖上。如果您提供了結(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é)果會自動在頁面中展現(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）。每條出行方案由步行線路和公交線路組成。在起點到上車點之間、下車點到終點之間以及每個換乘站之間都會存在步行線路，如果上述的某兩點位置重合，那么其間的步行路線長度為0。
在下面示例中，通過數(shù)據(jù)接口將第一條方案的路線添加到地圖上，并將所有方案的描述信息輸出到頁面上
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ǎo)航服務(wù)也提供了豐富的數(shù)據(jù)接口，通過onSearchComplete回調(diào)函數(shù)可以得到BMap.DrivingRouteResult對象，它包含了駕車導(dǎo)航結(jié)果數(shù)據(jù)信息。結(jié)果會包含若干駕車方案（目前僅提供一條方案），每條方案中包含了若干駕車線路（如果導(dǎo)航方案只包含一個目的地，那么駕車線路的個數(shù)就為1，如果方案包含若干個目的地，則駕車線路的個數(shù)會大于1。目前API尚不支持多個目的地的駕車導(dǎo)航）。 每條駕車線路又會包含一系列的關(guān)鍵步驟（BMap.Step），關(guān)鍵步驟描述了具體駕車行駛方案，可通過BMap.Step.getDescription()方法獲得。
步行導(dǎo)航接口在使用上與駕車導(dǎo)航一致，具體請參考API文檔。
地理編碼
地理編碼能夠?qū)⒌刂沸畔⑥D(zhuǎn)換為地理坐標(biāo)點信息。
根據(jù)地址描述獲得坐標(biāo)
百度地圖API提供Geocoder類進(jìn)行地址解析，您可以通過Geocoder.getPoint()方法來將一段地址描述轉(zhuǎn)換為一個坐標(biāo)。
在下面的示例中，我們將獲得地址“北京市海淀區(qū)上地10街10號”的地理坐標(biāo)位置，并在這個位置上添加一個標(biāo)注。注意在調(diào)用Geocoder.getPoint()方法時您需要提供地址解析所在的城市（本例為“北京市”）。
百度地圖API官方資料站點：http://openapi.baidu.com/map/developer.html
?
轉(zhuǎn)載于:https://www.cnblogs.com/sczw-maqing/p/3244130.html
總結(jié)
以上是生活随笔為你收集整理的百度地图API开发指南的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 软件设计之UML—UML中的六大关系
- 下一篇： ImportError: No modu