百度地圖api如何使用_javascript技巧

如果想用百度地圖api，首先需要先取得一個百度地圖api的密鑰，然後引入百度地圖的api，接下來，我們詳細介紹下獲取、引入api密鑰的技巧，以及透過程式碼給大家詳解下百度地圖api如何使用，詳情請看下文。

首先 ，如果想呼叫百度地圖api，你需要取得一個百度地圖api的金鑰。

申請密鑰很簡單，在百度地圖api的首頁就有相關鏈接，填寫相關資訊百度就會給你一個密鑰了。

接下來，就是引入百度地圖的api

關鍵程式碼如下：

複製程式碼 程式碼如下:

接下來我們就可以創建一個地圖試試看了。 （Js代碼）

複製程式碼 程式碼如下:

var map = new BMap.Map("container");          // 建立地圖實例
var point = new BMap.Point(120.391655,36.067588);  // 建立點座標
map.centerAndZoom(point, 15);
//map.centerAndZoom("北京", 15);
//map.centerAndZoom("Hongkong", 15);    

           
這裡要說明三點:

1.map.centerAndZoom方法建立地圖，第一個參數可以是根據先前創建好的一個點為中心，創建出地圖，也可以根據城市地區的中文名稱建立地圖。 （如果拼字正確，可以根據城市的英文名稱來創建）

2. map.centerAndZoom第二個參數是地圖縮放級別，最大為19，最小為0。 （但實際縮小到3的時候就已經。。）

3.BMap.Map方法建立地圖時候需要一個容器(地圖會根據容器的大小自動進行調整。)，填寫相關容器的id。

關於地圖大小：

可以透過

複製程式碼 程式碼如下:

map.setZoom();

方法主動控制地圖大小等級。

也可以透過設定

複製程式碼 程式碼如下:

map.enableScrollWheelZoom(true);

利用滑鼠滾輪控制大小。

百度地圖提供了非常豐富的功能空間共我們使用。

1.Control：控制項的抽象基底類，所有控制項均繼承此類的方法、屬性。透過此類您可實現自訂控制項。

2.NavigationControl：地圖平移縮放控件，PC端預設位於地圖左上方，它包含控制地圖的平移和縮放的功能。移動端提供縮放控件，預設位於地圖右下方。

3.OverviewMapControl：縮略地圖控件，預設位於地圖右下方，是一個可折疊的縮略地圖。

4.ScaleControl：比例尺控件，預設位於地圖左下方，顯示地圖的比例關係。

5.MapTypeControl：地圖類型控件，預設位於地圖右上方(地圖，衛星，三維)。

6.CopyrightControl：版權控件，預設位於地圖左下方。

7.GeolocationControl：定位控件，針對行動端開發，預設位於地圖左下方。

效果圖

 

複製程式碼 程式碼如下:

map.addControl(new BMap.NavigationControl());//縮放平移控制項
map.addControl(new BMap.ScaleControl());    //比例尺
map.addControl(new BMap.OverviewMapControl());//縮圖
map.addControl(new BMap.MapTypeControl()); //地圖類型
map.setCurrentCity("青島");

注意：設定城市資訊時，MapTypeControl的切換功能才能可用

地圖事件：
百度地圖API中的物件大多含有addEventListener方法，我們可以透過此方法監聽物件事件。
例：

複製程式碼 程式碼如下:

map.addEventListener("click", function(){   
 alert("您點擊了地圖。");   
});

當我們不再希望監聽事件時，可以將事件監聽移除。每個API物件提供了removeEventListener用來移除事件監聽函式。

複製程式碼 程式碼如下:

map.removeEventListener("click", functionA);
map.addEventListener("click", functionA);

地圖遮蓋物:

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

Marker：標註表示地圖上的點，可自訂標註的圖示。

Label：表示地圖上的文字標註，您可以自訂標註的文字內容。

Polyline：表示地圖上的折線。

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

Circle: 表示地圖上的圓。

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

標註範例：

var point = new BMap.Point(120.389472,36.072362);//默认 可以通过Icon类来指定自定义图标
 var marker = new BMap.Marker(point);
 var label = new BMap.Label("青岛市政府",{offset:new BMap.Size(20,-10)});//标注标签 
 marker.setLabel(label)//设置标注说明
 marker.enableDragging();//标注可以拖动的
 marker.addEventListener("dragend", function(e){ 
  alert(e.point.lng + ", " + e.point.lat);//打印拖动结束坐标 
 }); 
 map.addOverlay(marker); 
 var point = new BMap.Point(120.387244,36.064835);
 var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25));
 var marker2 = new BMap.Marker(point, {icon: myIcon}); 
 map.addOverlay(marker2);
 var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>详细信息</p>"); //弹出窗口
 marker2.addEventListener("click", function(){
  this.openInfoWindow(infoWindow); 
 });

以上說明就是本文的全部內容，希望對大家使用百度地圖api有幫助。