百度地圖AIP的用法

首先 ，若是想調用百度地圖api，你須要獲取一個百度地圖api的密鑰。

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

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

關鍵代碼以下：

<script type="text/javascript" src="http://api.map.baidu.com/api?ak=yourkey&v=2.0&services=false"></script>  

接下來咱們就能夠建立一個地圖試試看了。（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); 
         });