自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

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

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

簡介什么是百度地圖API？

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

面向的讀者

　　API是提供給那些具有一定JavaScript編程經驗和了解面向對象概念的讀者使用。此外，讀者還應該對地圖產品有一定的了解。

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

獲取API

　　地圖API是由JavaScript語言編寫的，您在使用之前需要通過<script>標簽將API引用到頁面中：

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

　　其中參數v為API當前的版本號，目前最新版本為1.2。在1.2版本之前您還可以設置services參數，以告知API是否加載服務部分，true表示加載，false表示不加載，默認為true。

開發(fā)移動平臺上的地圖應用

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

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

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

異步加載

　　API 1.1和1.2版本支持異步加載，您可以在引用腳本的時候添加callback參數，當腳本加載完成后callback函數會被立刻調用。請參考下面的使用示例：

  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

　　移動平臺：iPhone、Android

版本說明

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

問題解答

　　如果您在使用百度地圖API中遇到問題，請嘗試通過以下途徑解決：

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

　　開始學習百度地圖API最簡單的方式是看一個簡單的示例。以下代碼創(chuàng)建了一個地圖并以天安門作為地圖的中心：

  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)建地圖實例var point = new BMap.Point(116.404, 39.915);   
  11. // 創(chuàng)建點坐標map.centerAndZoom(point, 15);   
  12. // 初始化地圖，設置中心點坐標和地圖級別</script> 
  13. </body></html> 

　　下面我們分步向您介紹：

準備頁面

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

<!DOCTYPE html>

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

　　下面我們添加一個meta標簽，以便使您的頁面更好的在移動平臺上展示。

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

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

  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)建地圖容器元素 

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

命名空間

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

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

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

　　注意在調用此構造函數時應確保容器元素已經添加到地圖上。

創(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í)行其他操作。

地圖配置與操作

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

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

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

  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); 控件 地圖控件概述 

　　百度地圖上負責與地圖交互的UI元素稱為控件。百度地圖API中提供了豐富的控件，您還可以通過Control類來實現自定義控件。

　　地圖API中提供的控件有：

　　Control：控件的抽象基類，所有控件均繼承此類的方法、屬性。通過此類您可實現自定義控件。

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

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

　　ScaleControl：比例尺控件，默認位于地圖左下方，顯示地圖的比例關系。

　　MapTypeControl：地圖類型控件，默認位于地圖右上方。

　　CopyrightControl：版權控件，默認位于地圖左下方。

向地圖添加控件

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

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());   
  4. map.addControl(new BMap.MapTypeControl());   
  5. map.setCurrentCity("北京"); // 僅當設置城市信息時，  
  6. MapTypeControl的切換功能才能可用 控制控件位置 

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

控件?？课恢?/p>

　　anchor表示控件的?？课恢茫纯丶？吭诘貓D的哪個角。當地圖尺寸發(fā)生變化時，控件會根據停靠位置的不同來調整自己的位置。anchor允許的值為：

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

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

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

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

控件位置偏移

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

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

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

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

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

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

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

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

下面的示例將調整平移縮放地圖控件的外觀。

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

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

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

　　定義一個自定義控件的構造函數。

　　設置自定義控件構造函數的prototype屬性為Control的實例，以便繼承控件基類。

　　實現initialize()方法并提供defaultAnchor和defaultOffset屬性。

定義構造函數并繼承Control

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

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

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

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

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

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

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

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

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

　　Marker：標注表示地圖上的點，可自定義標注的圖標。

　　Label：表示地圖上的文本標注，您可以自定義標注的文本內容。

　　Polyline：表示地圖上的折線。

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

　　Circle: 表示地圖上的圓。

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

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

標注

　　標注表示地圖上的點。API提供了默認圖標樣式，您也可以通過Icon類來指定自定義圖標。Marker的構造函數的參數為Point和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. // 創(chuàng)建標注 map.addOverlay(marker);   
  6. // 將標注添加到地圖中 定義標注圖標 

　　通過Icon類可實現自定義標注的圖標，下面示例通過參數MarkerOptions的icon屬性進行設置，您也可以使用marker.setIcon()方法。

  1. var map = new BMap.Map("container"); 
  2. var point = new BMap.Point(116.404, 39.915); 
  3. map.centerAndZoom(point, 15); // 編寫自定義函數，創(chuàng)建標注 
  4. function addMarker(point, index){ 
  5. // 創(chuàng)建圖標對象 
  6. var myIcon = new BMap.Icon("markers.png", new BMap.Size(23, 25),  
  7.  { // 指定定位位置。   
  8. // 當標注顯示在地圖上時，其所指向的地理位置距離圖標左上  
  9.  // 角各偏移10像素和25像素。您可以看到在本例中該位置即是   
  10. // 圖標中央下端的尖角位置。 offset: new BMap.Size(10, 25), // 設置圖片偏移。   
  11. // 當您需要從一幅較大的圖片中截取某部分作為標注圖標時，您   
  12. // 需要指定大圖的偏移位置，此做法與css sprites技術類似。 
  13. imageOffset: new BMap.Size(0, 0 - index * 25)   
  14. // 設置圖片偏移 });   
  15. // 創(chuàng)建標注對象并添加到地圖   
  16. var marker = new BMap.Marker(point, {icon: myIcon});   
  17. map.addOverlay(marker); } // 隨機向地圖添加10個標注   
  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)聽標注事件 

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

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

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

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

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

　　例如，您可以在標注被移除后調用此方法：

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

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

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

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

添加折線

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

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

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

  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版本起支持用戶自定義覆蓋物。

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

　　定義一個自定義覆蓋物的構造函數，通過構造函數參數可以傳遞一些自由的變量。

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

　　實現initialize方法，當調用map.addOverlay方法時，API會調用此方法。

　　實現draw方法。

定義構造函數并繼承Overlay

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

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

　　當調用map.addOverlay方法添加自定義覆蓋物時，API會調用該對象的initialize方法用來初始化覆蓋物，在初始化過程中需要創(chuàng)建覆蓋物所需要的DOM元素，并添加到地圖相應的容器中。

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

　　floatPane

　　markerMouseTarget

　　floatShadow

　　labelPane

　　markerPane

　　mapPane

　　這些對象代表了不同的覆蓋物容器元素，它們之間存在著覆蓋關系，最上一層為floatPane，用于顯示信息窗口內容，下面依次為標注點擊區(qū)域層、信息窗口陰影層、文本標注層、標注層和矢量圖形層。

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

// 實現初始化方法 SquareOverlay.prototype.initialize = function(map){ // 保存map對象實例 this._map = map; // 創(chuàng)建div元素，作為自定義覆蓋物的容器 var div = document.createElement("div"); div.style.position = "absolute"; // 可以根據參數設置元素外觀 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元素作為方法的返回值，當調用該覆蓋物的show、 // hide方法，或者對覆蓋物進行移除時，API都將操作此元素。 return div; }繪制覆蓋物

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

// 實現繪制方法 SquareOverlay.prototype.draw = function(){ // 根據地理坐標轉換為像素坐標，并設置給容器 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"; }移除覆蓋物

　　當調用map.removeOverlay或者map.clearOverlays方法時，API會自動將initialize方法返回的DOM元素進行移除。

　　顯示和隱藏覆蓋物

　　自定義覆蓋物會自動繼承Overlay的show和hide方法，方法會修改由initialize方法返回的DOM元素的style.display屬性。如果自定義覆蓋物元素較為復雜，您也可以自己實現show和hide方法。

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

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

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

　　您現在已經完成了一個完整的自定義覆蓋物的編寫，可以添加到地圖上了。

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

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

事件監(jiān)聽

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

　　有關地圖API對象的事件，請參考完整的API參考文檔。

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

  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("您點擊了地圖。"); }); 

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

  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("地圖中心點變更為：" + center.lng + ", " + center.lat); });   
  5. 事件參數和this 

　　在標準的DOM事件模型中（DOM Level 2 Events），監(jiān)聽函數會得到一個事件對象e，在e中可以獲取有關該事件的信息。同時在監(jiān)聽函數中this會指向觸發(fā)該事件的DOM元素。 百度地圖API的事件模型與此類似，在事件監(jiān)聽函數中傳遞事件對象e，每個e參數至少包含事件類型（type）和觸發(fā)該事件的對象（target）。 API還保證函數內的this指向觸發(fā)（同時也是綁定）事件的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. alert(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. alert("地圖縮放至：" + this.getZoom() + "級"); });   
  5. 移除監(jiān)聽事件 

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

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

  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. 地圖圖層 地圖圖層概念 

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

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

　　TrafficLayer：交通流量圖層。

添加和移除圖層

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

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

　　若要從地圖上移除圖層，需要調用map.removeTileLayer方法。

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

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

　　經緯度球面坐標系統(tǒng)

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

　　圖塊編號系統(tǒng)

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

var point = new BMap.Point(116.404, 39.915); // 創(chuàng)建點坐標，經度在前，緯度在后

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

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

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

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

定義取圖規(guī)則

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

添加和移除自定義圖層

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

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

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

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

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

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

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

向地圖添加工具

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

  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)建標注工具實例  
  5.  myPushpin.addEventListener("markend", function(e){   
  6. // 監(jiān)聽事件，提示標注點坐標信息 alert("您標注的位置：" + e.marker.getPoint().lng + ", " + e.marker.getPoint().lat); });   
  7. myPushpin.open();   
  8. // 開啟標注工具 通過按鈕控制工具的開啟和關閉 

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

　　首先初始化地圖并創(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="開啟" onclick="myDis.open()" /> <input type="button" value="關閉" onclick="myDis.close()" /> 拉框放大工具

　　一些工具類提供了可修改的配置參數，您可參考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 : "拖拽鼠標進行操作" }); 服務 地圖服務概述

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

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

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

　　DrivingRoute：駕車導航，提供駕車出行方案的搜索服務。

　　WalkingRoute：步行導航，提供步行出行方案的搜索服務。

　　Geocoder：地址解析，提供將地址信息轉換為坐標點信息的服務。

　　LocalCity：本地城市，提供自動判斷您所在城市的服務。

　　TrafficControl：實時路況控件，提供實時和歷史路況信息服務。

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

本地搜索

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

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

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個結果，并且根據結果點位置自動調整地圖視野，不顯示第一條結果的信息窗口：

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("中關村"); 結果面板

　　通過設置BMap.LocalSearchOptions.renderOptions.panel屬性，可以為本地搜索對象提供一個結果列表容器，搜索結果會自動添加到容器元素中。請看下面示例：

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("天安門"); 數據接口

　　除了搜索結果會自動添加到地圖和列表外，您還可以通過數據接口獲得詳細的數據信息，結合地圖API您可以自行向地圖添加標注和信息窗口。BMap.LocalSearch和BMap.LocalSearchOptions類提供了若干設置回調函數的接口，通過它們可得到搜索結果的數據信息。 例如，通過onSearchComplete回調函數參數可以獲得BMap.LocalResult對象實例，它包含了每一次搜索結果的數據信息。 當回調函數被執(zhí)行時，您可以使用BMap.LocalSearch.getStatus()方法來確認搜索是否成功或者得到錯誤的詳細信息。

　　在下面這個示例中，通過onSearchComplete回調函數得到第一頁每條結果的標題和地址信息，并輸出到頁面上：

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

　　通過周邊搜索服務，您可以在某個地點附近進行搜索，也可以在某一個特定結果點周圍進行搜索。

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

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("小吃", "前門"); 范圍搜索

　　范圍搜索將根據您提供的視野范圍提供搜索結果。注意：當搜索范圍過大時可能會出現無結果的情況。

　　下面示例展示在當前地圖視野范圍內搜索銀行：

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()); 公交導航

　　BMap.TransitRoute類提供公交導航搜索服務。和本地搜索類似，在搜索之前需要指定搜索區(qū)域，注意公交導航的區(qū)域范圍只能是市，而不能是省。如果搜索區(qū)域為BMap.Map對象，路線結果會自動添加到地圖上。如果您提供了結果容器，相應的路線描述也會展示在頁面上。

　　下面示例展示了如何使用公交導航服務：

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("王府井", "西單"); 結果面板

　　您可以提供用于展示文字結果的容器元素，方案結果會自動在頁面中展現：

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("王府井", "西單"); 數據接口

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

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

 

  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("中關村", "國貿橋");  
  21.  駕車導航 

　　BMap.DrivingRoute提供駕車導航服務。與公交導航不同的是，駕車導航的搜索范圍可以設置為省。

　　下面示例展示了如何使用駕車導航接口：

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("中關村", "天安門"); 結果面板

　　下面示例中，我們提供了結果面板參數，方案描述會自動展示到頁面上。

 

  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("中關村", "天安門"); 數據接口 

　　駕車導航服務也提供了豐富的數據接口，通過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 = { onSearchComplete: function(results){   
  4. if (driving.getStatus() == BMAP_STATUS_SUCCESS){   
  5. // 獲取第一條方案 var plan = results.getPlan(0);   
  6. // 獲取方案的駕車線路 var route = plan.getRoute(0);   
  7. // 獲取每個關鍵步驟，并輸出到頁面 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("中關村", "天安門"); 

　　步行導航接口在使用上與駕車導航一致，具體請參考API文檔。

地理編碼

　　地理編碼能夠將地址信息轉換為地理坐標點信息。

根據地址描述獲得坐標

　　百度地圖API提供Geocoder類進行地址解析，您可以通過Geocoder.getPoint()方法來將一段地址描述轉換為一個坐標。

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

 

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

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

責任編輯：彭凡 來源： 百度
百度地圖API
相關推薦

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-24 14:01:29

API

2011-09-16 14:39:02

百度地圖API

2011-10-09 11:07:40

百度地圖API

2022-03-27 10:04:23

Angular8項目vue

2012-02-01 09:33:36

百度地圖API

2021-06-15 14:33:00

高德百度騰訊

2013-04-08 14:59:54

Android學習筆記百度地圖Overlay

2011-12-29 16:18:14

API

2011-10-21 09:11:41

百度地圖API

2014-06-12 09:35:25

設備定向API移動開發(fā)

2012-02-03 14:01:15

地圖

2011-05-25 14:36:17

2013-04-08 14:46:42

Android學習筆記百度地圖

2013-08-22 17:08:50

2023-12-20 17:38:44

APIhttp鴻蒙

2020-12-11 22:02:00

百度地圖Apollo
點贊
收藏

51CTO技術棧公眾號