百度地圖API的使用方法
百度地圖APIjavascript
開始學習百度地圖API最簡單的方式是看一個簡單的示例。如下代碼建立了一個520x340大小的地圖區域並以天安門做爲地圖的中心: html
1. <html> java
2. <head> 程序員
3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 編程
4. <title>Hello, World</title> api
5. <script type="text/javascript" src="http://api.map.baidu.com/api?key=46ce9d0614bf7aefe0ba562f8cf87194&v=1.0&services=false"></script> 瀏覽器
6. </head> app
7. <body> dom
8. <div style="width:520px;height:340px;border:1px solid gray" id="container"></div> 函數
9. </body>
10. </html>
11.
12.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=46ce9d0614bf7aefe0ba562f8cf87194&v=1.0&services=false"></script>
</head>
<body>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
</body>
</html>
1. <script type="text/javascript">
2. var map = new BMap.Map("container"); // 建立地圖實例
3. var point = new BMap.Point(116.404, 39.915); // 建立點座標
4. map.centerAndZoom(point, 15); // 初始化地圖，設置中心點座標和地圖級別
5. </script>
6.
<script type="text/javascript">
var map = new BMap.Map("container"); // 建立地圖實例
var point = new BMap.Point(116.404, 39.915); // 建立點座標
map.centerAndZoom(point, 15); // 初始化地圖，設置中心點座標和地圖級別
</script>
引用百度地圖API文件
當您引用地圖API文件時，須要使用本身申請的API密鑰。
1. <script type="text/javascript" src="http://api.map.baidu.com/api?key=46ce9d0614bf7aefe0ba562f8cf87194&v=1.0&services=false"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=46ce9d0614bf7aefe0ba562f8cf87194&v=1.0&services=false"></script>
建立地圖容器元素
1. <div style="width:520px;height:340px;border:1px solid #000" id="container"></div>
<div style="width:520px;height:340px;border:1px solid #000" id="container"></div>
地圖須要一個HTML元素做爲容器，這樣才能展示到頁面上。這裏咱們建立了一個div元素並制定它的大小。地圖會根據容器大小調整自身尺寸。
命名空間
API使用BMap做爲命名空間，全部類均在該命名空間之下，好比：BMap.Map、BMap.Control、BMap.Overlay。
建立地圖實例
1. var map = new BMap.Map("container");
var map = new BMap.Map("container");
位於BMap命名空間下的Map類表示地圖，經過new操做符能夠建立一個地圖實例。其參數能夠是元素id也能夠是元素對象。
注意在調用此構造函數時應確保容器元素已經添加到地圖上。
建立點座標
1. var point = new BMap.Point(116.404, 39.915);
var point = new BMap.Point(116.404, 39.915);
這裏咱們使用BMap命名空間下的Point類來建立一個座標點。Point類描述了一個地理座標點，其中116.404表示經度，39.915表示緯度。
地圖初始化
1. map.centerAndZoom(point,15);
map.centerAndZoom(point,15);
在建立地圖實例後，咱們須要對其進行初始化，BMap.Map.centerAndZoom()方法要求設置中心點座標和地圖級別。
地圖必須通過初始化才能夠執行其餘操做。
地圖操做
地圖被實例化並完成初始化之後，就能夠與其進行交互了。API中的地圖對象的外觀與行爲與百度地圖網站上交互的地圖很是類似。它支持鼠標拖拽、滾輪縮放、雙擊放大等交互功能。您也能夠修改配置來改變這些功能。
您還能夠經過編程的方式與地圖交互。Map類提供了若干修改地圖狀態的方法。例如：setCenter()、panTo()、zoomTo()等等。
下面示例顯示一個地圖，等待兩秒鐘後，它會移動到新中心點。panTo()方法將讓地圖平滑移動至新中心點，若是移動距離超過了當前地圖區域大小，則地圖會直跳到該點。
1. var map = new BMap.Map("container");
2. var point = new BMap.Point(116.404, 39.915);
3. map.centerAndZoom(point, 15);
4. window.setTimeout(function(){
5. map.panTo(new BMap.Point(116.409, 39.918));
6. }, 2000);
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);
地圖控件概述
百度地圖上負責與地圖交互的UI元素稱爲控件。百度地圖API中提供了豐富的控件，您還能夠經過BMap.Control來實現自定義控件。
地圖API中提供的控件有：
· Control：控件的抽象基類，全部控件均繼承此類的方法、屬性。經過此類您可實現自定義控件。
· NavigationControl：地圖平移縮放控件，默認位於地圖左上方，它包含控制地圖的平移和縮放的功能。
· OverviewMapControl：縮略地圖控件，默認位於地圖右下方，是一個可摺疊的縮略地圖。
· ScaleControl：比例尺控件，默認位於地圖左下方，顯示地圖的比例關係。
· CopyrightControl：版權控件，默認位於地圖左下方。
全部這些控件都基於BMap.Control類。
向地圖添加控件
可使用BMap.Map.addControl()方法向地圖添加控件。在此以前地圖須要進行初始化。例如，要將標準地圖控件添加到地圖中，可在代碼中添加以下內容：
1. var map = new BMap.Map("container");
2. map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
3. map.addControl(new BMap.NavigationControl());
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.addControl(new BMap.NavigationControl());
能夠向地圖添加多個控件。在本例中咱們向地圖添加一個平移縮放控件、一個比例尺控件和一個縮略圖控件。在地圖中添加控件後，它們即刻生效。
1. map.addControl(new BMap.NavigationControl());
2. map.addControl(new BMap.ScaleControl());
3. map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
控制控件的位置
初始化控件時，可提供一個可選參數，參數類型爲一個JavaScript對象。其中anchor和offsetX、offsetY共同控制控件在地圖上的位置。anchor表示控件停靠在地圖的哪一個角，容許的值爲：
· BMAP_ANCHOR_TOP_LEFT
· BMAP_ANCHOR_TOP_RIGHT
· BMAP_ANCHOR_BOTTOM_LEFT
· BMAP_ANCHOR_BOTTOM_RIGHT
除了指定停靠位置外，還能夠提供偏移量，用來指示控件距離地圖邊界相隔多少像素。
本示例將標準地圖控件放置在地圖的右上角，間隔10個像素。
1. var opts = {anchor: BMAP_ANCHOR_TOP_RIGHT, offset: new BMap.Size(10, 10)}
2. map.addControl(new BMap.NavigationControl(opts));
var opts = {anchor: BMAP_ANCHOR_TOP_RIGHT, offset: new BMap.Size(10, 10)}
map.addControl(new BMap.NavigationControl(opts));
修改控件的配置
地圖API的控件提供了豐富的配置參數，您可參考API文檔來修改它們以便獲得符合要求的控件外觀。
本示例將調整平移縮放地圖控件的外觀。
1. var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL}
2. map.addControl(new BMap.NavigationControl(opts));
var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL}
map.addControl(new BMap.NavigationControl(opts));
自定義控件
百度地圖API容許您經過繼承BMap.Control來建立自定義地圖控件。（注意JavaScript是經過prototype屬性進行繼承的）
要建立可用的自定義控件，您須要實現類定義中的一個抽象方法並給兩個屬性賦值，它們是：initialize()和defaultAnchor、defaultOffset。initialize()方法必須返回控件容器的DOM元素，defaultAnchor爲控件默認的停靠位置，defaultOffset爲控件默認的間隔距離。
全部自定義的地圖控件中的DOM元素最終都應該添加到地圖容器（即地圖所在的DOM元素）中去，這個地圖容器能夠經過BMap.Map.getContainer()方法得到。
在此示例中，建立一個簡單的放大控件，每一次點擊將地圖放大兩個級別。它具備文本標識，而不是平移縮放控件中使用的圖形圖標。
1. // 定義一個控件類，即function
2. function ZoomControl(){
3. // 設置默認停靠位置和偏移量
4. this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
5. this.defaultOffset = new BMap.Size(10, 10);
6. }
7. // 經過JavaScript的prototype屬性繼承於BMap.Control
8. ZoomControl.prototype = new BMap.Control();
9. // 自定義控件必須實現本身的initialize方法，而且將控件的DOM元素返回
10. // 在本方法中建立個div元素做爲控件的容器，並將其添加到地圖容器中
11. ZoomControl.prototype.initialize = function(map){
12. // 建立一個DOM元素
13. var div = document.createElement("div");
14. // 添加文字說明
15. div.appendChild(document.createTextNode("放大2級"));
16. // 設置樣式
17. div.style.cursor = "pointer";
18. div.style.border = "1px solid gray";
19. div.style.backgroundColor = "white";
20. // 綁定事件，點擊一次放大兩級
21. div.onclick = function(e){
22. map.zoomTo(map.getZoom() + 2);
23. }
24. // 添加DOM元素到地圖中
25. map.getContainer().appendChild(div);
26. // 將DOM元素返回
27. return div;
28. }
29. // 建立控件
30. var myZoomCtrl = new ZoomControl();
31. // 添加到地圖當中
32. map.addControl(myZoomCtrl);
地圖覆蓋物概述
全部疊加或覆蓋到地圖的內容，咱們統稱爲地圖覆蓋物。如標註、矢量圖形元素(包括：折線和多邊形)、信息窗口等。覆蓋物擁有本身的地理座標，當您拖動或縮放地圖時，它們會相應的移動。
地圖API提供了以下幾種覆蓋物：
· Overlay：覆蓋物的抽象基類，此類不可實例化，全部的覆蓋物均繼承此類的方法。
· Marker：標註表示地圖上的點，可自定義標註的圖標。
· Label：表示地圖上的文本標註，您能夠自定義標註的文本內容。
· Polyline：表示地圖上的折線。
· Polygon：表示地圖上的多邊形。多邊形相似於閉合的折線，另外您也能夠爲其添加填充顏色。
· InfoWindow：信息窗口也是一種特殊的覆蓋物。注意：同一時刻只能有一個信息窗口在地圖上打開。
可使用BMap.Map.addOverlay()方法向地圖添加覆蓋物，使用BMap.Map.removeOverlay()方法移除覆蓋物，注意此方法不適用於InfoWindow。
標註
標註表示地圖上的點。API提供了默認圖標樣式，您也能夠經過Icon類來指定自定義圖標。BMap.Marker的構造函數的參數爲BMap.Point和BMap.MarkerOptions（可選）。 注意：當您使用自定義圖標時，標註的地理座標點將位於標註所用圖標的中心位置，您可經過Icon的offset屬性修改標定位置。
下面的示例向地圖中心點添加了一個標註，並使用默認的標註樣式。
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. map.addOverlay(marker); // 將標註添加到地圖中
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); // 建立標註
map.addOverlay(marker); // 將標註添加到地圖中
定義標註圖標
經過BMap.Icon類可實現自定義標註的圖標，下面示例經過參數BMap.MarkerOptions的icon屬性進行設置，您也可使用BMap.Marker.setIcon()方法。
1. var map = new BMap.Map("container");
2. var point = new BMap.Point(116.404, 39.915);
3. map.centerAndZoom(point, 15);
4. // 編寫自定義函數，建立標註
5. function addMarker(point, index){
6. // 建立圖標對象
7. var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
8. offset: new BMap.Size(10, 25), // 指定定位位置
9. imageOffset: new BMap.Size(0, 0 - index * 25) // 設置圖片偏移
10. });
11. var marker = new BMap.Marker(point, {icon: myIcon});
12. map.addOverlay(marker);
13. }
14. // 隨機向地圖添加10個標註
15. var bounds = map.getBounds();
16. var lngSpan = bounds.maxX - bounds.minX;
17. var latSpan = bounds.maxY - bounds.minY;
18. for (var i = 0; i < 10; i ++) {
19. var point = new BMap.Point(bounds.minX + lngSpan * (Math.random() * 0.7 + 0.15),
20. bounds.minY + latSpan * (Math.random() * 0.7 + 0.15));
21. addMarker(point, i);
22. }
var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
// 編寫自定義函數，建立標註
function addMarker(point, index){
// 建立圖標對象
var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
offset: new BMap.Size(10, 25), // 指定定位位置
imageOffset: new BMap.Size(0, 0 - index * 25) // 設置圖片偏移
});
var marker = new BMap.Marker(point, {icon: myIcon});
map.addOverlay(marker);
}
// 隨機向地圖添加10個標註
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);
}
監聽標註的事件
事件方法與Map事件機制相同。可參考事件部分。
1. marker.addEventListener("click", function(){
2. alert("您點擊了標註");
3. });
marker.addEventListener("click", function(){
alert("您點擊了標註");
});
內存釋放
若是您在地圖中須要反覆添加大量的標註，這可能會佔用較多的內存資源。若是您的標註在被移除後再也不使用，可調用Overlay.dispose()方法來釋放內存。注意在調用此方法後標註將不能再次添加到地圖上。關於Overlay.dispose()的詳細信息可參考API文檔部份內容。
例如，您能夠在標註被移除後調用此方法：
1. map.removeOverlay(marker);
2. marker.dispose();
map.removeOverlay(marker);
marker.dispose();
信息窗口
信息窗口在地圖上方的浮動顯示HTML內容。信息窗口可直接在地圖上的任意位置打開，也能夠在標註對象上打開（此時信息窗口的座標與標註的座標一致）。 可使用BMap.InfoWindow來建立一個信息窗實例，注意同一時刻地圖上只能有一個信息窗口處於打開狀態。
1. var opts = {
2. width : 250, // 信息窗口寬度
3. height: 100, // 信息窗口高度
4. title : "Hello" // 信息窗口標題
5. }
6. var infoWindow = new BMap.InfoWindow("World", opts); // 建立信息窗口對象
7. map.openInfoWindow(infoWindow, map.getCenter()); // 打開信息窗口
var opts = {
width : 250, // 信息窗口寬度
height: 100, // 信息窗口高度
title : "Hello" // 信息窗口標題
}
var infoWindow = new BMap.InfoWindow("World", opts); // 建立信息窗口對象
map.openInfoWindow(infoWindow, map.getCenter()); // 打開信息窗口
折線
BMap.Polyline對象表示地圖上的折線覆蓋物。它包含一組點，並將這些點鏈接起來造成折線。
添加折線
折線在地圖上繪製爲一系列直線段。能夠自定義這些線段的顏色、粗細和透明度。顏色能夠是十六進制數字形式（好比：#ff0000）或者是顏色關鍵字（好比：red）。
BMap.Polyline對象須要瀏覽器支持矢量繪製功能。在Internet Explorer中，地圖使用VML（請參閱VML）繪製折線；在其餘瀏覽器中使用SVG（若是可用）。
如下代碼段會在兩點之間建立6像素寬的藍色折線：
1. var polyline = new BMap.Polyline([
2. new BMap.Point(116.399, 39.910),
3. new BMap.Point(116.405, 39.920)
4. ],
5. {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}
6. );
7. map.addOverlay(polyline);
地圖事件概述
瀏覽器中的JavaScript是「事件驅動的」，這表示JavaScript經過生成事件來響應交互，並指望程序可以「監聽」感興趣的活動。例如，在瀏覽器中，用戶的鼠標和鍵盤交互能夠建立在DOM內傳播的事件。對某些事件感興趣的程序會爲這些事件註冊JavaScript事件監聽器，並在接收這些事件時執行代碼。
百度地圖API擁有一個本身的事件模型，程序員可監聽地圖API對象的自定義事件，使用方法和DOM事件相似。但請注意，地圖API事件是獨立的，與標準DOM事件不一樣。
事件的監聽
百度地圖API中的每個對象都含有addEventListener方法，您能夠經過該方法來監聽對象事件。例如，BMap.Map包含click、dblclick等事件。在特定環境下這些事件會被觸發，同時監聽函數會獲得相應的事件參數e，好比當用戶點擊地圖時，e參數會包含鼠標所對應的地理位置point。
有關地圖API對象的事件，請參考完整的API參考文檔。
addEventListener方法有兩個參數：監聽的事件名稱和事件觸發時調用的函數。下面示例中，每當用戶點擊地圖時，會彈出一個警告框。
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("您點擊了地圖。");
5. });
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.addEventListener("click", function(){
alert("您點擊了地圖。");
});
經過監聽事件還能夠捕獲事件觸發後的狀態。下面示例顯示用戶拖動地圖後地圖中心的經緯度信息。
1. var map = new BMap.Map("container");
2. map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
3. map.addEventListener("dragend", function(){
4. var center = map.getCenter();
5. document.getElementById("info").innerHTML = center.lng + ", " + center.lat;
6. });
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.addEventListener("dragend", function(){
var center = map.getCenter();
document.getElementById("info").innerHTML = center.lng + ", " + center.lat;
});
事件參數和this
在標準的DOM事件模型中（DOM Level 2 Events），監聽函數會獲得一個事件對象e，在e中能夠獲取有關該事件的信息。同時在監聽函數中this會指向觸發該事件的DOM元素。 百度地圖API的事件模型與此相似，在事件監聽函數中傳遞事件對象e，每一個e參數至少包含事件類型（type）和觸發該事件的對象（target）。 API還保證函數內的this指向觸發（同時也是綁定）事件的API對象。
例如，經過參數e獲得點擊的經緯度座標。
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. document.getElementById("info").innerHTML = e.point.lng + ", " + e.point.lat;
5. });
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.addEventListener("click", function(e){
document.getElementById("info").innerHTML = e.point.lng + ", " + e.point.lat;
});
或者經過this獲得地圖縮放後的級別。
1. var map = new BMap.Map("container");
2. map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
3. map.addEventListener("zoomend", function(){
4. document.getElementById("info").innerHTML = "地圖縮放至：" + this.getZoom() + "級";
5. });
移除監聽事件
當您再也不但願監聽事件時，能夠將事件監聽進行移除。每一個API對象提供了removeEventListener用來移除事件監聽函數。
下面示例中，用戶第一次點擊地圖會觸發事件監聽函數，在函數內部對事件監聽進行了移除，所以後續的點擊操做則不會觸發監聽函數。
1. var map = new BMap.Map("container");
2. map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
3. function showInfo(e){
4. document.getElementById("info").innerHTML = e.point.lng + ", " + e.point.lat;
5. map.removeEventListener("click", showInfo);
6. }
7. map.addEventListener("click", showInfo);
地圖圖層概念
地圖能夠包含一個或多個圖層，每一個圖層在每一個級別都是由若干張圖塊組成的，它們覆蓋了地球的整個表面。
在最低的縮放級別（級別 1）中，整個地球由 4 張圖塊組成。隨着級別的增加，地圖所使用的圖塊個數也隨之增多。
自定義圖層
百度地圖中提供一個BMap.TileLayer類，能夠實現用戶自定義圖層功能。能夠在百度地圖上疊加一層自定義的圖塊。
有關TileLayer類的詳細接口，請參考TileLayer的API參考文檔。
如下代碼在每一個圖塊的全部縮放級別上顯示一個簡單的透明疊加層，使用浮動紅色小水滴表示圖塊的輪廓。
1. var map = new BMap.Map("container"); // 建立地圖實例
2. var point = new BMap.Point(116.404, 39.915); // 建立點座標
3. map.centerAndZoom(point,15); // 初始化地圖，設置中心點座標和地圖級別
4. var tilelayer = new BMap.TileLayer(); // 建立地圖層實例
5. tilelayer.getTilesUrl=function(){ // 設置圖塊路徑
6. return "layer.gif";
7. };
8. map.addTileLayer(tilelayer); // 將圖層添加到地圖上
地圖工具概述
百度地圖提供了交互功能更爲複雜的「工具」，它包括：
· PushpinTool：標註工具。經過此工具用戶可在地圖任意區域添加標註。
· DistanceTool：測距工具。經過此工具用戶可測量地圖上任意位置之間的距離。
· DragAndZoomTool：區域縮放工具。此工具將根據用戶拖拽繪製的矩形區域大小對地圖進行放大或縮小操做。
工具類在初始化時須要提供地圖實例參數，以便使工具在該地圖上生效。您能夠在地圖上添加多個工具，但同一時刻只能有一個工具處於開啓狀態。標註工具和測距工具在完成一次操做後將自動退出開啓狀態，而區域縮放工具能夠自行配置是否自動關閉。
向地圖添加工具
在地圖正確初始化後，您能夠建立工具實例。下面示例展現瞭如何向地圖添加一個標註工具。
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. myPushpin.addEventListener("markend", function(e){ // 監聽事件，提示標註點座標信息
5. alert("您標註的位置：" +
6. e.marker.getPoint().lng + ", " +
7. e.marker.getPoint().lat);
8. });
9. myPushpin.open(); // 開啓標註工具
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
var myPushpin = new BMap.PushpinTool(map); // 建立標註工具實例
myPushpin.addEventListener("markend", function(e){ // 監聽事件，提示標註點座標信息
alert("您標註的位置：" +
e.marker.getPoint().lng + ", " +
e.marker.getPoint().lat);
});
myPushpin.open(); // 開啓標註工具
經過按鈕控制工具的開啓和關閉
工具類沒有提供控制其開啓和關閉的UI元素。您能夠根據須要本身建立這些元素，把它們放置在地圖區域內或者區域外都可。調用工具類的open和close可控制工具的開啓和關閉。
首先初始化地圖並建立一個測距工具實例：
1. var map = new BMap.Map("container");
2. map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
3. var myDis = new BMap.DistanceTool(map);
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
var myDis = new BMap.DistanceTool(map);
接着咱們建立兩個按鈕元素併爲其添加點擊事件。
1. <input type="button" value="開啓" onclick="myDis.open()" />
2. <input type="button" value="關閉" onclick="myDis.close()" />
修改工具的配置
一些工具類提供了可修改的配置參數，您可參考API文檔來修改它們以便符合您的要求。
本示例爲區域縮放工具添加提示文字。
1. var map = new BMap.Map("container");
2. map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
3. var myDrag = new BMap.DragAndZoomTool(map, {
4. followText : "拖拽鼠標進行操做"
5. });
地圖服務概述
地圖服務是指那些提供數據信息的接口，好比本地搜索、路線規劃等等。百度地圖API提供的服務有：
· LocalSearch：本地搜索，提供某一特定地區的位置搜索服務，好比在北京市搜索「公園」。
· TransitRoute：公交導航，提供某一特定地區的公交出行方案的搜索服務。
· DrivingRoute：駕車導航，提供駕車出行方案的搜索服務。
· WalkingRoute：步行導航，提供步行出行方案的搜索服務。
· Geocoder：地址解析，提供將地址信息轉換爲座標點信息的服務。
· LocalCity：本地城市，提供自動判斷您所在城市的服務。
· TrafficControl：實時路況控件，提供實時和歷史路況信息服務。
搜索類的服務接口須要指定一個搜索範圍，不然接口將不能工做。
本地搜索
BMap.LocalSearch提供本地搜索服務，在使用本地搜索時須要爲其設置一個檢索區域，檢索區域能夠是BMap.Map對象、BMap.Point對象或者是省市名稱（好比："北京市"）的字符串。BMap.LocalSearch構造函數的第二個參數是可選的，您能夠在其中指定結果的呈現。BMap.RenderOptions類提供了若干控制呈現的屬性，其中map指定告終果所展示的地圖實例，panel指定告終果列表的容器元素。
下面這個示例展現了在北京市檢索天安門。搜索區域設置爲地圖實例，並告知結果須要展示在地圖實例上。
1. var map = new BMap.Map("container");
2. map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
3. var local = new BMap.LocalSearch(map, {
4. renderOptions:{map: map}
5. });
6. local.search("天安門");
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方法，爲您提供周邊搜索和範圍搜索服務。
配置搜索
BMap.LocalSearch提供了若干配置方法，經過它們能夠自定義搜索服務的行爲以知足您的需求。
在下面的示例中，咱們調整每頁顯示8個結果，而且根據結果點位置自動調整地圖視野，不顯示第一條結果的信息窗口：
1. var map = new BMap.Map("container");
2. map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
3. var local = new BMap.LocalSearch("北京市", {
4. renderOptions: {
5. map: map,
6. pageCapacity: 8,
7. autoViewport: true,
8. selectFirstResult: false
9. }
10. });
11. local.search("中關村");
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
var local = new BMap.LocalSearch("北京市", {
renderOptions: {
map: map,
pageCapacity: 8,
autoViewport: true,
selectFirstResult: false
}
});
local.search("中關村");
結果面板
經過設置BMap.LocalSearchOptions.renderOptions.panel屬性，能夠爲本地搜索對象提供一個結果列表容器，搜索結果會自動添加到容器元素中。請看下面示例：
1. var map = new BMap.Map("container");
2. map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
3. var local = new BMap.LocalSearch(map, {
4. renderOptions: {map: map, panel: "results"}
5. });
6. local.search("天安門");
數據接口
除了搜索結果會自動添加到地圖和列表外，您還能夠經過數據接口得到詳細的數據信息，結合地圖API您能夠自行向地圖添加標註和信息窗口。BMap.LocalSearch和BMap.LocalSearchOptions類提供了若干設置回調函數的接口，經過它們可獲得搜索結果的數據信息。 例如，經過onSearchComplete回調函數參數能夠得到BMap.LocalResult對象實例，它包含了每一次搜索結果的數據信息。 當回調函數被執行時，您可使用BMap.LocalSearch.getStatus()方法來確認搜索是否成功或者獲得錯誤的詳細信息。
在下面這個示例中，經過onSearchComplete回調函數獲得第一頁每條結果的標題和地址信息，並輸出到頁面上：
1. var map = new BMap.Map("container");
2. map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
3. var options = {
4. onSearchComplete: function(results){
5. if (local.getStatus() == BMAP_STATUS_SUCCESS){
6. // 判斷狀態是否正確
7. var s = [];
8. for (var i = 0; i < results.getCurrentNumPois(); i ++){
9. s.push(results.getPoi(i).title + ", " + results.getPoi(i).address);
10. }
11. document.getElementById("log").innerHTML = s.join("<BR>");
12. }
13. }
14. };
15. var local = new BMap.LocalSearch(map, options);
16. local.search("公園");
周邊搜索
經過周邊搜索服務，您能夠在某個地點附近進行搜索，也能夠在某一個特定結果點周圍進行搜索。
下面示例展現如何在前門附近搜索小吃：
1. var map = new BMap.Map("container");
2. map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
3. var local = new BMap.LocalSearch(map, {
4. renderOptions:{map: map, autoViewport: true}
5. });
6. local.searchNearby("小吃", "前門");
範圍搜索
範圍搜索將根據您提供的視野範圍提供搜索結果。注意：當搜索範圍過大時可能會出現無結果的狀況。
下面示例展現在當前地圖視野範圍內搜索銀行：
1. var map = new BMap.Map("container");
2. map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);
3.
4. var local = new BMap.LocalSearch(map, {
5. renderOptions:{map: map}
6. });
7. local.searchInBounds("銀行", map.getBounds());
公交導航
BMap.TransitRoute類提供公交導航搜索服務。和本地搜索相似，在搜索以前須要指定搜索區域，注意公交導航的區域範圍只能是市，而不能是省。若是搜索區域爲BMap.Map對象，路線結果會自動添加到地圖上。若是您提供告終果容器，相應的路線描述也會展現在頁面上。
下面示例展現瞭如何使用公交導航服務：
1. var map = new BMap.Map("container");
2. map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);
3. var transit = new BMap.TransitRoute(map, {
4. renderOptions: {map: map}
5. });
6. transit.search("王府井", "西單");
結果面板
您能夠提供用於展現文字結果的容器元素，方案結果會自動在頁面中展示：
1. var map = new BMap.Map("container");
2. map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);
3.
4. var transit = new BMap.TransitRoute(map, {
5. renderOptions: {map: map, panel: "results"}
6. });
7. transit.search("王府井", "西單");
數據接口
您可經過數據接口獲取詳細的公交方案信息。公交導航搜索結果用BMap.TransitRouteResult來表示，其中包含了若干公交出行方案（BMap.TransitRoutePlan）。每條出行方案由步行線路和公交線路組成。 在起點到上車點之間、下車點到終點之間以及每一個換乘站之間都會存在步行線路，若是上述的某兩點位置重合，那麼其間的步行路線長度爲0。
在下面示例中，經過數據接口將第一條方案的路線添加到地圖上，並將全部方案的描述信息輸出到頁面上
1. var map = new BMap.Map("container");
2. map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
3.
4. var transit = new BMap.TransitRoute("北京市");
5. transit.setSearchCompleteCallback(function(results){
6. if (transit.getStatus() == BMAP_STATUS_SUCCESS){
7. var firstPlan = results.getPlan(0);
8. // 繪製步行線路
9. for (var i = 0; i < firstPlan.getNumRoutes(); i ++){
10. var walk = firstPlan.getRoute(i);
11. if (walk.getDistance(false) > 0){
12. // 步行線路有可能爲0
13. map.addOverlay(new BMap.Polyline(walk.getPoints(), {lineColor: "green"}));
14. }
15. }
16. // 繪製公交線路
17. for (i = 0; i < firstPlan.getNumLines(); i ++){
18. var line = firstPlan.getLine(i);
19. map.addOverlay(new BMap.Polyline(line.getPoints()));
20. }
21. // 輸出方案信息
22. var s = [];
23. for (i = 0; i < results.getNumPlans(); i ++){
24. s.push((i + 1) + ". " + results.getPlan(i).getDescription());
25. }
26. document.getElementById("log").innerHTML = s.join("<BR>");
27. }
28. })
29. transit.search("中關村", "國貿橋");
駕車導航
BMap.DrivingRoute提供駕車導航服務。與公交導航不一樣的是，駕車導航的搜索範圍能夠設置爲省。
下面示例展現瞭如何使用駕車導航接口：
1. var map = new BMap.Map("container");
2. map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);
3.
4. var driving = new BMap.DrivingRoute(map, {
5. renderOptions: {
6. map: map,
7. autoViewport: true
8. }
9. });
10. driving.search("中關村", "天安門");
結果面板
下面示例中，咱們提供告終果面板參數，方案描述會自動展現到頁面上。
1. var map = new BMap.Map("container");
2. map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);
3.
4. var driving = new BMap.DrivingRoute(map, {
5. renderOptions: {
6. map : map,
7. panel : "results",
8. autoViewport: true
9. }
10. });
11. driving.search("中關村", "天安門");
數據接口
駕車導航服務提供了豐富的數據接口，經過onSearchComplete回調函數獲得BMap.DrivingRouteResult對象，它包含了駕車導航結果數據信息。 結果會包含若干駕車方案（目前僅一條方案），每條方案中包含了若干駕車線路（若是導航方案只包含一個目的地，那麼駕車線路的個數就爲1，若是方案包含若干個目的地，則駕車線路的個數會大於1。目前API尚不支持多個目的地的駕車導航）。 每條駕車線路又會包含一系列的關鍵步驟（BMap.Step），關鍵步驟描述了具體駕車行駛方案，可經過BMap.Step.getDescription()方法得到。
1. var map = new BMap.Map("container");
2. map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);
3. var options = {
4. onSearchComplete: function(results){
5. if (driving.getStatus() == BMAP_STATUS_SUCCESS){
6. // 獲取第一條方案
7. var plan = results.getPlan(0);
8. // 獲取方案的駕車線路
9. var route = plan.getRoute(0);
10. // 獲取每一個關鍵步驟，並輸出到頁面
11. var s = [];
12. for (var i = 0; i < route.getNumSteps(); i ++){
13. var step = route.getStep(i);
14. s.push((i + 1) + ". " + step.getDescription());
15. }
16. document.getElementById("log").innerHTML = s.join("<BR>");
17. }
18. }
19. };
20. var driving = new BMap.DrivingRoute(map, options);
21. driving.search("中關村", "天安門");
步行導航接口在使用上與駕車導航一致，具體請參考API文檔。
地址解析
地址解析可以將地址信息轉換爲地理座標點信息。
1. var map = new BMap.Map("container");
2. map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
3. // 建立地址解析器實例
4. var myGeo = new BMap.Geocoder();
5. // 將地址解析結果顯示在地圖上，並調整地圖視野
6. myGeo.getPoint("北京市海淀區上地10街10號", function(point){
7. if (point) {
8. map.centerAndZoom(point, 16);
9. map.addOverlay(new BMap.Marker(point));
10. }
11. }, "北京市");
實時路況
實時路況以控件的形式供調用者使用，您僅須要實例化一個控件實例並添加到地圖上便可。
1. var map = new BMap.Map("container");
2. map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
3. // 添加實時路況控件
4. map.addControl(new BMap.TrafficControl());
// 定義一個控件類，即function
function ZoomControl(){
// 設置默認停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
this.defaultOffset = new BMap.Size(10, 10);
}
// 經過JavaScript的prototype屬性繼承於BMap.Control
ZoomControl.prototype = new BMap.Control();
// 自定義控件必須實現本身的initialize方法，而且將控件的DOM元素返回
// 在本方法中建立個div元素做爲控件的容器，並將其添加到地圖容器中
ZoomControl.prototype.initialize = function(map){
// 建立一個DOM元素
var div = document.createElement("div");
// 添加文字說明
div.appendChild(document.createTextNode("放大2級"));
// 設置樣式
div.style.cursor = "pointer";
div.style.border = "1px solid gray";
div.style.backgroundColor = "white";
// 綁定事件，點擊一次放大兩級
div.onclick = function(e){
map.zoomTo(map.getZoom() + 2);
}
// 添加DOM元素到地圖中
map.getContainer().appendChild(div);
// 將DOM元素返回
return div;
}
// 建立控件
var myZoomCtrl = new ZoomControl();
// 添加到地圖當中
map.addControl(myZoomCtrl);
- 1. 百度地圖API的使用方法
- 2. 百度地圖API用法
- 3. 百度地圖api使用
- 4. 百度地圖API使用
- 5. 調用百度地圖API去掉地圖左下角的百度LOGO方法
- 6. 百度地圖API：使用百度地圖
- 7. 百度地圖api的使用
- 8. 百度地圖API的使用
- 9. 百度地圖API的使用示例
- 10. 百度地圖javascript API的使用
- 更多相關文章...
- • PHP 獲取圖像寬度與高度 - PHP參考手冊
- • TortoiseSVN 使用教程 - SVN 教程
- • Git可視化極簡易教程 — Git GUI使用方法
- • C# 中 foreach 遍歷的用法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 百度地圖API的使用方法
- 2. 百度地圖API用法
- 3. 百度地圖api使用
- 4. 百度地圖API使用
- 5. 調用百度地圖API去掉地圖左下角的百度LOGO方法
- 6. 百度地圖API：使用百度地圖
- 7. 百度地圖api的使用
- 8. 百度地圖API的使用
- 9. 百度地圖API的使用示例
- 10. 百度地圖javascript API的使用