百度地圖API學習總結
一、百度地圖API介紹
百度地圖API是可以給開發人員呼叫的開放API，我們可以用Javascript語言進行呼叫；
聽起來API這個概念很抽象，初學者想：“百度的API，我們怎麼能呼叫？”，其實不是這樣，我們通過一個URL地址進行引用，然後就可以呼叫他的API；
不需要Web伺服器，只需要一個瀏覽器就能夠使用百度地圖API；
二、呼叫API的基本檔案格式
以下為開發百度地圖API的最基礎程式碼：
<html> <head> <!--引用百度地圖--> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3" 三、常用技術
1.建立地圖： var map = new BMap.Map("divid");
2.建立座標點：var point = new BMap.Point("經度","緯度");
3.設定檢視中心點：map.centerAndZoom(point,size);
4.啟用滾輪調整大小功能：map.enableScrollWheelZoom();
5.新增控制元件：map.addControl(new BMap.Xxx());
6.新增覆蓋物：map.addOverlay();
控制元件介紹
1.NavigationControl：縮放地圖的控制元件，預設在左上角；
2.OverviewMapControl：地圖的縮圖的控制元件，預設在右下方；
3.ScaleControl：地圖顯示比例的控制元件，預設在左下方；
4.MapTypeControl：地圖型別控制元件，預設在右上方；
如下圖所示：
map.addControl()方法新增控制元件；
程式碼示例：
<html> <head> <!--引用百度地圖--> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script> <title> 控制元件使用 </title> <!-- 設計樣式 container容器：佔50%大小 --> <style type="text/css"> #container{ width:50%; height:50%; } </style> </head> <body> <div id="container"></div> <script type="text/javascript"> var map = new BMap.Map("container");//在container容器中建立一個地圖,引數container為div的id屬性; var point = new BMap.Point(500,500);//定位 map.centerAndZoom(point,15); //將point移到瀏覽器中心，並且地圖大小調整為15; map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.MapTypeControl()); map.addControl(new BMap.ScaleControl()); map.addControl(new BMap.OverviewMapControl()); </script> </body></html>覆蓋物介紹
覆蓋物就是覆蓋在地圖上的某個事物；
1.標註：Marker
(1)在point處新增標註：var marker = new BMap.Marker(point);
(2)新增覆蓋物：map.addOverlay(marker);
(3)啟用標註的拖拽功能：marker.enableDragging();
(4)為標註新增事件：marker.addEventListener("名稱",function(){
//點選標註後的事件
});
(5)刪除覆蓋物：map.removeOverlay(marker);
(6)銷燬標註：marker.dispose();
2.資訊視窗：InfoWindow
(1)在某個特定的位置建立一個資訊視窗：var infowindow = new BMap.InfoWindow("內容",{width:250,height:100,title:"hello"});
(2)在地圖中央開啟資訊視窗：map.openInfoWindow(infoWindow,map.getCenter());
3.折線：Polyline
(1)var polyline = new BMap.Polyline([new BMap.Point(X1,Y1),new BMap.Point(X2,Y2),new BMap.Point(X3,Y3)],{strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
(2)map.addOverlay(polyline);
<html> <head> <!--引用百度地圖--> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script> <title> 如何呼叫API </title> <!-- 設計樣式 container容器：佔50%大小 --> <style type="text/css"> #container{ width:50%; height:50%; } </style> </head> <body> <div id="container"></div> <script type="text/javascript"> var map = new BMap.Map("container");//在container容器中建立一個地圖,引數container為div的id屬性; var point = new BMap.Point(116.404, 39.915);//定位 map.centerAndZoom(point,15); //將point移到瀏覽器中心，並且地圖大小調整為15; //標註 var marker = new BMap.Marker(point); map.addOverlay(marker); marker.addEventListener("click",function(){ //點選標註時出發事件 alert("您點選了標註"); }); marker.enableDragging(); //標註可拖拽 //建立資訊視窗 var opts = { width : 250, // 資訊視窗寬度 height: 100, // 資訊視窗高度 title : "Hello" // 資訊視窗標題 } var infoWindow = new BMap.InfoWindow("World", opts); // 建立資訊視窗物件 map.openInfoWindow(infoWindow, map.getCenter()); // 開啟資訊視窗 //折線 var polyline = new BMap.Polyline([ new BMap.Point(116.399, 39.910), new BMap.Point(116.405, 39.920), new BMap.Point(117.321,40.321) ], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5} //藍色、寬度為6 ); map.addOverlay(polyline); </script> </body></html>