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

首先 ，如果想調(diào)用百度地圖api，你需要獲取一個百度地圖api的密鑰。

申請密鑰很簡單，在百度地圖api的首頁就有相關(guān)鏈接，填寫相關(guān)信息百度就會給你一個密鑰了。

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

關(guān)鍵代碼如下：

1.map.centerAndZoom方法創(chuàng)建地圖，第一個參數(shù)可以是根據(jù)之前創(chuàng)建好的一個點為中心，創(chuàng)建出地圖，也可以根據(jù)城市地區(qū)的中文名稱創(chuàng)建地圖。（如果拼寫正確，可以根據(jù)城市的英文名稱來創(chuàng)建）

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

3.BMap.Map方法創(chuàng)建地圖時候需要一個容器(地圖會根據(jù)容器的大小自動進行調(diào)整。)，填寫相關(guān)容器的id。

關(guān)于地圖大小：

可以通過

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

也可以通過設(shè)置

利用鼠標滾輪控制大小。

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

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

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

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

4.ScaleControl：比例尺控件，默認位于地圖左下方，顯示地圖的比例關(guān)系。

5.MapTypeControl：地圖類型控件，默認位于地圖右上方(地圖，衛(wèi)星，三維)。

6.CopyrightControl：版權(quán)控件，默認位于地圖左下方。

7.GeolocationControl：定位控件，針對移動端開發(fā)，默認位于地圖左下方。

效果圖

地圖事件：
百度地圖API中的大部分對象都含有addEventListener方法，我們可以通過該方法來監(jiān)聽對象事件。
實例：

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

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

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

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)//設(shè)置標注說明
 marker.enableDragging();//標注可以拖動的
 marker.addEventListener("dragend", function(e){ 
  alert(e.point.lng + ", " + e.point.lat);//打印拖動結(jié)束坐標 
 }); 
 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); 
 });

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

最新評論