百度地圖API開發(fā)指南課件

百度地圖API開發(fā)指南Michael1百度地圖API開發(fā)指南Michael1簡介基礎知識控件覆蓋物事件地圖圖層工具服務坐標轉換演示目錄

2簡介目錄

2百度地圖API是一套由JavaScript語言編寫的應用程序接口，它能夠幫助您在網站中構建功能豐富、交互性強的地圖應用程序。百度地圖API不僅包含構建地圖的基本功能接口，還提供了諸如本地搜索、路線規(guī)劃等數據服務。簡介

什么是百度地圖API？

3百度地圖API是一套由JavaScript語言編寫的應用程序通過地址/api

加載API：<scriptsrc="/api?key=您的API密鑰&v=版本&services=true或者false"type="text/javascript"></script>其中參數key為密鑰，參數v為當前API的版本號，目前最新版本為1.0，services參數表示是否加載服務部分，true表示加載，false表示不加載。簡介

獲取API

4通過地址/地址/api?v=1.0中的參數v表示您加載API的版本，例如當前API的最新版本為1.0，則您可在地址中添加v=1.0。當API升級后，如果已有接口在使用、命名等方面發(fā)生了變化，我們會為其增加一個新的版本號（比如1.1），這不會對您現有的應用造成任何影響。如果升級只是修改一些bug或者在不影響現有功能的前提下增加接口，則版本號不會發(fā)生變化。簡介

版本說明

5地址/ap瀏覽器：IE6.0+、Firefox3.0+、Opera9.0+、Safari3.0+、Chrome操作系統(tǒng)：Windows、Mac、Linux簡介

兼容性

6瀏覽器：IE6.0+、Firefox3.0+、Opera一、引用百度地圖API文件當您引用地圖API文件時，需要使用自己申請的API密鑰。<script

type="text/javascript"

src="/api?key=46ce9d0614bf7aefe0ba562f8cf87194&v=1.0&services=false"></script>

二、創(chuàng)建地圖容器元素<div

style="width:520px;height:340px;border:1px

solid

#000"

id="container"></div>

地圖需要一個HTML元素作為容器，這樣才能展現到頁面上。這里我們創(chuàng)建了一個div元素并制定它的大小地圖會根據容器大小調整自身尺寸?；A知識

百度地圖的“Hello,World”

7一、引用百度地圖API文件基礎知識

百度地圖的“Hello,三、命名空間API使用BMap作為命名空間，所有類均在該命名空間之下，比如：BMap.Map、BMap.Control、BMap.Overlay。四、創(chuàng)建地圖實例var

map

=

new

BMap.Map("container");

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

注意在調用此構造函數時應確保容器元素已經添加到地圖上?；A知識

百度地圖的“Hello,World”

8三、命名空間基礎知識

百度地圖的“Hello,World”五、創(chuàng)建點坐標var

point

=

new

BMap.Point(116.404,

39.915);

這里我們使用BMap命名空間下的Point類來創(chuàng)建一個坐標點。Point類描述了一個地理坐標點，其中116.404表示經度，39.915表示緯度。六、地圖初始化map.centerAndZoom(point,15);

在創(chuàng)建地圖實例后，我們需要對其進行初始化，BMap.Map.centerAndZoom()方法要求設置中心點坐標和地圖級別。

地圖必須經過初始化才可以執(zhí)行其他操作。基礎知識

百度地圖的“Hello,World”

9五、創(chuàng)建點坐標基礎知識

百度地圖的“Hello,World五、創(chuàng)建點坐標var

point

=

new

BMap.Point(116.404,

39.915);

這里我們使用BMap命名空間下的Point類來創(chuàng)建一個坐標點。Point類描述了一個地理坐標點，其中116.404表示經度，39.915表示緯度。六、地圖初始化map.centerAndZoom(point,15);

在創(chuàng)建地圖實例后，我們需要對其進行初始化，BMap.Map.centerAndZoom()方法要求設置中心點坐標和地圖級別。

地圖必須經過初始化才可以執(zhí)行其他操作?；A知識

百度地圖的“Hello,World”

10五、創(chuàng)建點坐標基礎知識

百度地圖的“Hello,World基礎知識

百度地圖的“Hello,World”

11基礎知識

百度地圖的“Hello,World”

11百度地圖上負責與地圖交互的UI元素稱為控件。百度地圖API中提供了豐富的控件，您還可以通過BMap.Control來實現自定義控件。地圖API中提供的控件有：Control：控件的抽象基類，所有控件均繼承此類的方法、屬性。通過此類您可實現自定義控件。NavigationControl：地圖平移縮放控件，默認位于地圖左上方，它包含控制地圖的平移和縮放的功能。OverviewMapControl：縮略地圖控件，默認位于地圖右下方，是一個可折疊的縮略地圖。ScaleControl：比例尺控件，默認位于地圖左下方，顯示地圖的比例關系。CopyrightControl：版權控件，默認位于地圖左下方。所有這些控件都基于BMap.Control類?？丶?/p>

地圖控件概述

12百度地圖上負責與地圖交互的UI元素稱為控件。百度地圖API中可以使用BMap.Map.addControl()方法向地圖添加控件也可以向地圖添加多個控件。在本例中我們向地圖添加一個平移縮放控件、一個比例尺控件和一個縮略圖控件在地圖中添加控件后，它們即刻生效。map.addControl(new

BMap.NavigationControl());

map.addControl(new

BMap.ScaleControl());

map.addControl(new

BMap.OverviewMapControl());

控件

向地圖添加控件

13可以使用BMap.Map.addControl()方法向地圖控件

向地圖添加控件

14控件

向地圖添加控件

14所有疊加或覆蓋到地圖的內容，我們統(tǒng)稱為地圖覆蓋物。如標注、矢量圖形元素(包括：折線和多邊形)、信息窗口等。覆蓋物擁有自己的地理坐標，當您拖動或縮放地圖時，它們會相應的移動。地圖API提供了如下幾種覆蓋物：Overlay：覆蓋物的抽象基類，此類不可實例化，所有的覆蓋物均繼承此類的方法。Marker：標注表示地圖上的點，可自定義標注的圖標。Label：表示地圖上的文本標注，您可以自定義標注的文本內容。Polyline：表示地圖上的折線。Polygon：表示地圖上的多邊形。多邊形類似于閉合的折線，另外您也可以為其添加填充顏色。InfoWindow：信息窗口也是一種特殊的覆蓋物。注意：同一時刻只能有一個信息窗口在地圖上打開?？梢允褂肂Map.Map.addOverlay()方法向地圖添加覆蓋物，使用BMap.Map.removeOverlay()方法移除覆蓋物，注意此方法不適用于InfoWindow。覆蓋物

地圖覆蓋物概述

15所有疊加或覆蓋到地圖的內容，我們統(tǒng)稱為地圖覆蓋物。如標注、矢覆蓋物

地圖覆蓋物概述

16覆蓋物

地圖覆蓋物概述

16百度地圖API中的每一個對象都含有addEventListener方法，您可以通過該方法來監(jiān)聽對象事件。例如，BMap.Map包含click、dblclick等事件。在特定環(huán)境下這些事件會被觸發(fā)，同時監(jiān)聽函數會得到相應的事件參數e，比如當用戶點擊地圖時，e參數會包含鼠標所對應的地理位置point。有關地圖API對象的事件，請參考完整的API參考文檔。addEventListener方法有兩個參數：監(jiān)聽的事件名稱和事件觸發(fā)時調用的函數。事件

事件的監(jiān)聽

17百度地圖API中的每一個對象都含有addEventListe地圖可以包含一個或多個圖層，每個圖層在每個級別都是由若干張圖塊組成的，它們覆蓋了地球的整個表面。在最低的縮放級別（級別1）中，整個地球由4張圖塊組成。隨著級別的增長，地圖所使用的圖塊個數也隨之增多。地圖圖層

地圖圖層概念

18地圖可以包含一個或多個圖層，每個圖層在每個級別都是由若干張圖百度地圖中提供一個BMap.TileLayer類，可以實現用戶自定義圖層功能。可以在百度地圖上疊加一層自定義的圖塊。以下代碼在每個圖塊的所有縮放級別上顯示一個簡單的透明疊加層，使用浮動紅色小水滴表示圖塊的輪廓。var

map

=

new

BMap.Map("container");//

創(chuàng)建地圖實例

var

point

=

new

BMap.Point(116.404,

39.915);//

創(chuàng)建點坐標

map.centerAndZoom(point,15);

//

初始化地圖，設置中心點坐標和地圖級別

var

tilelayer

=

new

BMap.TileLayer();

//

創(chuàng)建地圖層實例

tilelayer.getTilesUrl=function(){

//

設置圖塊路徑

return

"layer.gif";

};

map.addTileLayer(tilelayer);

//

將圖層添加到地圖上

地圖圖層

自定義圖層

19百度地圖中提供一個BMap.TileLayer類，可以實現用地圖圖層

自定義圖層

20地圖圖層

自定義圖層

20百度地圖提供了交互功能更為復雜的“工具”，它包括PushpinTool：標注工具。通過此工具用戶可在地圖任意區(qū)域添加標注。DistanceTool：測距工具。通過此工具用戶可測量地圖上任意位置之間的距離。DragAndZoomTool：區(qū)域縮放工具。此工具將根據用戶拖拽繪制的矩形區(qū)域大小對地圖進行放大或縮小操作。工具類在初始化時需要提供地圖實例參數，以便使工具在該地圖上生效。您可以在地圖上添加多個工具，但同一時刻只能有一個工具處于開啟狀態(tài)。標注工具和測距工具在完成一次操作后將自動退出開啟狀態(tài)，而區(qū)域縮放工具可以自行配置是否自動關閉。工具

地圖工具概述

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

地圖工var

map

=

new

BMap.Map("container");

map.centerAndZoom(new

BMap.Point(116.404,

39.915),

15);

var

myDis

=

new

BMap.DistanceTool(map);

myDis.open();工具

向地圖添加工具

22var

map

=

new

BMap.Map("contai地圖服務是指那些提供數據信息的接口，比如本地搜索、路線規(guī)劃等等。百度地圖API提供的服務有：LocalSearch：本地搜索，提供某一特定地區(qū)的位置搜索服務比如在北京市搜索“公園”。TransitRoute：公交導航，提供某一特定地區(qū)的公交出行方案的搜索服務。DrivingRoute：駕車導航，提供駕車出行方案的搜索服務。WalkingRoute：步行導航，提供步行出行方案的搜索服務。Geocoder：地址解析，提供將地址信息轉換為坐標點信息的服務。LocalCity：本地城市，提供自動判斷您所在城市的服務。TrafficControl：實時路況控件，提供實時和歷史路況信息服務。搜索類的服務接口需要指定一個搜索范圍，否則接口將不能工作。服務

地圖服務概述

23地圖服務是指那些提供數據信息的接口，比如本地搜索、路線規(guī)劃等服務

結果面板

24服務

結果面板

24因目前各家地圖API服務商都沿用不同的坐標體系，故客戶在更換API服務商或對各家API性能進行測試的時候會遇到較大的障礙。因此百度地圖提供坐標轉換工具，使您可以方便地將不同的坐標體系轉換為百度地圖標準坐標。極大地降低您更換API服務的成本，同時擴大了可選擇范圍和自由度。目前百度地圖坐標轉換工具支持以下API服務商所采用的坐標體系：MapbarMapabc51ditu谷歌坐標轉換

坐標轉換概述25因目前各家地圖API服務商都沿用不同的坐標體系，故客戶在更換請求接口中有四個參數：from：被轉換的坐標體系to：轉換到這個坐標體系x：經度y：緯度接口應答中有三個key：(應答格式如：{"error":0,"x":116.2610991221,"y":29.820560874846})error：值為0時，則為成功，非0時，則為失敗x：目的經度，即百度坐標經度y：目的緯度，即百度坐標緯度接口的使用示例谷歌/ag/coord/convert?from=gcj02ll&to=bd09ll&x=116.254615&y=29.814476

51地圖：51地圖的坐標，先要除10^5，然后再調用url

/ag/coord/convert?from=gcj02ll&to=bd09ll&x=116.254615&y=29.814476坐標轉換

坐標轉換接口說明26請求接口中有四個參數：坐標轉換

坐標轉換接口說明26謝謝！

27謝謝！

27百度地圖API開發(fā)指南Michael28百度地圖API開發(fā)指南Michael1簡介基礎知識控件覆蓋物事件地圖圖層工具服務坐標轉換演示目錄

29簡介目錄

2百度地圖API是一套由JavaScript語言編寫的應用程序接口，它能夠幫助您在網站中構建功能豐富、交互性強的地圖應用程序。百度地圖API不僅包含構建地圖的基本功能接口，還提供了諸如本地搜索、路線規(guī)劃等數據服務。簡介

什么是百度地圖API？

30百度地圖API是一套由JavaScript語言編寫的應用程序通過地址/api

加載API：<scriptsrc="/api?key=您的API密鑰&v=版本&services=true或者false"type="text/javascript"></script>其中參數key為密鑰，參數v為當前API的版本號，目前最新版本為1.0，services參數表示是否加載服務部分，true表示加載，false表示不加載。簡介

獲取API

31通過地址/地址/api?v=1.0中的參數v表示您加載API的版本，例如當前API的最新版本為1.0，則您可在地址中添加v=1.0。當API升級后，如果已有接口在使用、命名等方面發(fā)生了變化，我們會為其增加一個新的版本號（比如1.1），這不會對您現有的應用造成任何影響。如果升級只是修改一些bug或者在不影響現有功能的前提下增加接口，則版本號不會發(fā)生變化。簡介

版本說明

32地址/ap瀏覽器：IE6.0+、Firefox3.0+、Opera9.0+、Safari3.0+、Chrome操作系統(tǒng)：Windows、Mac、Linux簡介

兼容性

33瀏覽器：IE6.0+、Firefox3.0+、Opera一、引用百度地圖API文件當您引用地圖API文件時，需要使用自己申請的API密鑰。<script

type="text/javascript"

src="/api?key=46ce9d0614bf7aefe0ba562f8cf87194&v=1.0&services=false"></script>

二、創(chuàng)建地圖容器元素<div

style="width:520px;height:340px;border:1px

solid

#000"

id="container"></div>

地圖需要一個HTML元素作為容器，這樣才能展現到頁面上。這里我們創(chuàng)建了一個div元素并制定它的大小地圖會根據容器大小調整自身尺寸?；A知識

百度地圖的“Hello,World”

34一、引用百度地圖API文件基礎知識

百度地圖的“Hello,三、命名空間API使用BMap作為命名空間，所有類均在該命名空間之下，比如：BMap.Map、BMap.Control、BMap.Overlay。四、創(chuàng)建地圖實例var

map

=

new

BMap.Map("container");

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

注意在調用此構造函數時應確保容器元素已經添加到地圖上?；A知識

百度地圖的“Hello,World”

35三、命名空間基礎知識

百度地圖的“Hello,World”五、創(chuàng)建點坐標var

point

=

new

BMap.Point(116.404,

39.915);

這里我們使用BMap命名空間下的Point類來創(chuàng)建一個坐標點。Point類描述了一個地理坐標點，其中116.404表示經度，39.915表示緯度。六、地圖初始化map.centerAndZoom(point,15);

在創(chuàng)建地圖實例后，我們需要對其進行初始化，BMap.Map.centerAndZoom()方法要求設置中心點坐標和地圖級別。

地圖必須經過初始化才可以執(zhí)行其他操作?；A知識

百度地圖的“Hello,World”

36五、創(chuàng)建點坐標基礎知識

百度地圖的“Hello,World五、創(chuàng)建點坐標var

point

=

new

BMap.Point(116.404,

39.915);

這里我們使用BMap命名空間下的Point類來創(chuàng)建一個坐標點。Point類描述了一個地理坐標點，其中116.404表示經度，39.915表示緯度。六、地圖初始化map.centerAndZoom(point,15);

在創(chuàng)建地圖實例后，我們需要對其進行初始化，BMap.Map.centerAndZoom()方法要求設置中心點坐標和地圖級別。

地圖必須經過初始化才可以執(zhí)行其他操作?；A知識

百度地圖的“Hello,World”

37五、創(chuàng)建點坐標基礎知識

百度地圖的“Hello,World基礎知識

百度地圖的“Hello,World”

38基礎知識

百度地圖的“Hello,World”

11百度地圖上負責與地圖交互的UI元素稱為控件。百度地圖API中提供了豐富的控件，您還可以通過BMap.Control來實現自定義控件。地圖API中提供的控件有：Control：控件的抽象基類，所有控件均繼承此類的方法、屬性。通過此類您可實現自定義控件。NavigationControl：地圖平移縮放控件，默認位于地圖左上方，它包含控制地圖的平移和縮放的功能。OverviewMapControl：縮略地圖控件，默認位于地圖右下方，是一個可折疊的縮略地圖。ScaleControl：比例尺控件，默認位于地圖左下方，顯示地圖的比例關系。CopyrightControl：版權控件，默認位于地圖左下方。所有這些控件都基于BMap.Control類。控件

地圖控件概述

39百度地圖上負責與地圖交互的UI元素稱為控件。百度地圖API中可以使用BMap.Map.addControl()方法向地圖添加控件也可以向地圖添加多個控件。在本例中我們向地圖添加一個平移縮放控件、一個比例尺控件和一個縮略圖控件在地圖中添加控件后，它們即刻生效。map.addControl(new

BMap.NavigationControl());

map.addControl(new

BMap.ScaleControl());

map.addControl(new

BMap.OverviewMapControl());

控件

向地圖添加控件

40可以使用BMap.Map.addControl()方法向地圖控件

向地圖添加控件

41控件

向地圖添加控件

14所有疊加或覆蓋到地圖的內容，我們統(tǒng)稱為地圖覆蓋物。如標注、矢量圖形元素(包括：折線和多邊形)、信息窗口等。覆蓋物擁有自己的地理坐標，當您拖動或縮放地圖時，它們會相應的移動。地圖API提供了如下幾種覆蓋物：Overlay：覆蓋物的抽象基類，此類不可實例化，所有的覆蓋物均繼承此類的方法。Marker：標注表示地圖上的點，可自定義標注的圖標。Label：表示地圖上的文本標注，您可以自定義標注的文本內容。Polyline：表示地圖上的折線。Polygon：表示地圖上的多邊形。多邊形類似于閉合的折線，另外您也可以為其添加填充顏色。InfoWindow：信息窗口也是一種特殊的覆蓋物。注意：同一時刻只能有一個信息窗口在地圖上打開?？梢允褂肂Map.Map.addOverlay()方法向地圖添加覆蓋物，使用BMap.Map.removeOverlay()方法移除覆蓋物，注意此方法不適用于InfoWindow。覆蓋物

地圖覆蓋物概述

42所有疊加或覆蓋到地圖的內容，我們統(tǒng)稱為地圖覆蓋物。如標注、矢覆蓋物

地圖覆蓋物概述

43覆蓋物

地圖覆蓋物概述

16百度地圖API中的每一個對象都含有addEventListener方法，您可以通過該方法來監(jiān)聽對象事件。例如，BMap.Map包含click、dblclick等事件。在特定環(huán)境下這些事件會被觸發(fā)，同時監(jiān)聽函數會得到相應的事件參數e，比如當用戶點擊地圖時，e參數會包含鼠標所對應的地理位置point。有關地圖API對象的事件，請參考完整的API參考文檔。addEventListener方法有兩個參數：監(jiān)聽的事件名稱和事件觸發(fā)時調用的函數。事件

事件的監(jiān)聽

44百度地圖API中的每一個對象都含有addEventListe地圖可以包含一個或多個圖層，每個圖層在每個級別都是由若干張圖塊組成的，它們覆蓋了地球的整個表面。在最低的縮放級別（級別1）中，整個地球由4張圖塊組成。隨著級別的增長，地圖所使用的圖塊個數也隨之增多。地圖圖層

地圖圖層概念

45地圖可以包含一個或多個圖層，每個圖層在每個級別都是由若干張圖百度地圖中提供一個BMap.TileLayer類，可以實現用戶自定義圖層功能。可以在百度地圖上疊加一層自定義的圖塊。以下代碼在每個圖塊的所有縮放級別上顯示一個簡單的透明疊加層，使用浮動紅色小水滴表示圖塊的輪廓。var

map

=

new

BMap.Map("container");//

創(chuàng)建地圖實例

var

point

=

new

BMap.Point(116.404,

39.915);//

創(chuàng)建點坐標

map.centerAndZoom(point,15);

//

初始化地圖，設置中心點坐標和地圖級別

var

tilelayer

=

new

BMap.TileLayer();

//

創(chuàng)建地圖層實例

tilelayer.getTilesUrl=function(){

//

設置圖塊路徑

return

"layer.gif";

};

map.addTileLayer(tilelayer);

//

將圖層添加到地圖上

地圖圖層

自定義圖層

46百度地圖中提供一個BMap.TileLayer類，可以實現用地圖圖層

自定義圖層

47地圖圖層

自定義圖層

20百度地圖提供了交互功能更為復雜的“工具”，它包括PushpinTool：標注工具。通過此工具用戶可在地圖任意區(qū)域添加標注。DistanceTool：測距工具。通過此工具用戶可測量地圖上任意位置之間的距離。DragAndZoomTool：區(qū)域縮放工具。此工具將根據用戶拖拽繪制的矩形區(qū)域大小對地圖進行放大或縮小操作。工具類在初始化時需要提供地圖實例參數，以便使工具在該地圖上生效。您可以在地圖上添加多個工具，但同一時刻只能有一個工具處于開啟狀態(tài)。標注工具和測距工具在完成一次操作后將自動退出開啟狀態(tài)，而區(qū)域縮放工具可以自行配置是否自動關閉。工具

地圖工具概述

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

地圖工var

map

=

new

BMap.Map("container");

map.centerAndZoom(new

BMap.Point(116.40