百度地圖API學習總結

原創 坚守信仰的臣子 2020-02-21 07:58

一、百度地圖API介紹

 

百度地圖API是可以給開發人員調用的開放API，我們可以用Javascript語言進行調用；

聽起來API這個概念很抽象，初學者想：“百度的API，我們怎麼能調用？”，其實不是這樣，我們通過一個URL地址進行引用，然後就可以調用他的API；

不需要Web服務器，只需要一個瀏覽器就能夠使用百度地圖API；

 

二、調用API的基本文件格式

 

以下爲開發百度地圖API的最基礎代碼：


[html] view plaincopy
  1. <html>  
  2.     <head>  
  3.         <!--引用百度地圖-->  
  4.         <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3">  
  5.         </script>  
  6.         <title>  
  7.             如何調用API  
  8.         </title>  
  9.                 <!--  
  10.         設計樣式   
  11.             container容器：佔50%大小  
  12.         -->  
  13.         <style type="text/css">  
  14.         #container{  
  15.             width:50%;  
  16.             height:50%;   
  17.         }  
  18.         </style>  
  19.     </head>  
  20.     <body>  
  21.         <div id="container"></div>  
  22.         <script type="text/javascript">  
  23.             var map = new BMap.Map("container");//在container容器中創建一個地圖,參數container爲div的id屬性;  
  24.             var point = new BMap.Point(500,500);//定位  
  25.             map.centerAndZoom(point,15);                //將point移到瀏覽器中心，並且地圖大小調整爲15;  
  26.               
  27.             <!--以後只需要在此處添加代碼即可-->  
  28.         </script>  
  29.     </body>  
  30. </html>  

 

三、常用技術


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] view plaincopy
  1. <html>  
  2.     <head>  
  3.         <!--引用百度地圖-->  
  4.         <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3">  
  5.         </script>  
  6.         <title>  
  7.             控件使用  
  8.         </title>  
  9.                 <!--  
  10.         設計樣式   
  11.             container容器：佔50%大小  
  12.         -->  
  13.         <style type="text/css">  
  14.         #container{  
  15.             width:50%;  
  16.             height:50%;   
  17.         }  
  18.         </style>  
  19.     </head>  
  20.     <body>  
  21.         <div id="container"></div>  
  22.         <script type="text/javascript">  
  23.             var map = new BMap.Map("container");//在container容器中創建一個地圖,參數container爲div的id屬性;  
  24.             var point = new BMap.Point(500,500);//定位  
  25.             map.centerAndZoom(point,15);                //將point移到瀏覽器中心，並且地圖大小調整爲15;  
  26.             map.addControl(new BMap.NavigationControl());  
  27.             map.addControl(new BMap.MapTypeControl());  
  28.             map.addControl(new BMap.ScaleControl());  
  29.             map.addControl(new BMap.OverviewMapControl());  
  30.         </script>  
  31.     </body>  
  32. </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] view plaincopy
  1. <html>  
  2.     <head>  
  3.         <!--引用百度地圖-->  
  4.         <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3">  
  5.         </script>  
  6.         <title>  
  7.             如何調用API  
  8.         </title>  
  9.                 <!--  
  10.         設計樣式   
  11.             container容器：佔50%大小  
  12.         -->  
  13.         <style type="text/css">  
  14.         #container{  
  15.             width:50%;  
  16.             height:50%;   
  17.         }  
  18.         </style>  
  19.     </head>  
  20.     <body>  
  21.         <div id="container"></div>  
  22.         <script type="text/javascript">  
  23.             var map = new BMap.Map("container");//在container容器中創建一個地圖,參數container爲div的id屬性;  
  24.             var point = new BMap.Point(116.404, 39.915);//定位  
  25.             map.centerAndZoom(point,15);                //將point移到瀏覽器中心，並且地圖大小調整爲15;  
  26.               
  27.             //標註  
  28.             var marker = new BMap.Marker(point);  
  29.             map.addOverlay(marker);  
  30.             marker.addEventListener("click",function(){ //點擊標註時出發事件  
  31.                 alert("您點擊了標註");  
  32.             });  
  33.             marker.enableDragging();    //標註可拖拽  
  34.               
  35.             //創建信息窗口  
  36.             var opts = {    
  37.                 width : 250,     // 信息窗口寬度    
  38.                 height: 100,     // 信息窗口高度    
  39.                 title : "Hello"  // 信息窗口標題    
  40.             }    
  41.             var infoWindow = new BMap.InfoWindow("World", opts);  // 創建信息窗口對象    
  42.             map.openInfoWindow(infoWindow, map.getCenter());      // 打開信息窗口   
  43.               
  44.             //折線  
  45.             var polyline = new BMap.Polyline([    
  46.                     new BMap.Point(116.399, 39.910),    
  47.                     new BMap.Point(116.405, 39.920),  
  48.                     new BMap.Point(117.321,40.321)    
  49.                         ],    
  50.                         {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}  //藍色、寬度爲6  
  51.             );    
  52.             map.addOverlay(polyline);    
  53.               
  54.         </script>  
  55.     </body>  
  56. </html>  


 

 

四、常見問題

 

1.怎麼獲得我想查找的地理位置的經度和緯度？

 

http://dev.baidu.com/wiki/static/map/API/tool/creatMap/

 

2.哪裏有學習百度地圖API的示例代碼？

 

http://dev.baidu.com/wiki/static/map/API/examples/index.html



來源:http://blog.csdn.net/xiazdong/article/details/7381142

堅守信仰的臣子
發佈了33 篇原創文章 · 獲贊 3 · 訪問量 9萬+
私信 關注
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Google Map,Baidu Map,latitude,longitude

美國GPS使用的是WGS84的座標系統，以經緯度的形式來表示地球平面上的某一個位置。但在我國，出於國家安全考慮，國內所有導航電子地圖必須使用國家測繪局制定的加密座標系統，即將一個真實的經緯度座標加密成一個不正確的經緯度座標，在業內將前者

tikeyc 2020-07-07 17:33:33

Goole Map API V3動態加載數據庫中的座標信息並添加標記（ASP.NET）

dandan12 2020-06-01 12:22:26

google map結合數據庫加載地圖

dandan12 2020-06-01 12:22:26

預覽文章: 初學 Google Maps JavaScript (5) 畫圓指定範圍

iteye_20503 2020-02-25 06:49:20

Google Map開發系列（九）——GMap2可以有哪些設置項

dandan12 2020-02-21 23:40:06

Google Map開發系列——總體介紹

dandan12 2020-02-21 23:40:06

Google Map開發系列（二）——使用谷歌地圖API應該有所瞭解的一些技術外背景

dandan12 2020-02-21 23:40:06

Google Map開發系列（八）——使用GMapOptions定製你的谷歌地圖

dandan12 2020-02-21 23:40:06

Google Map開發系列（四）——使用JavaScript創建地圖步驟詳解

dandan12 2020-02-21 23:40:06

Google Map開發系列（三）——加載谷歌地圖API的URL詳細解讀

dandan12 2020-02-21 23:40:06

Google Map開發系列（七）——使用谷歌地圖API實現自定義控件

dandan12 2020-02-21 23:40:06

Google Map開發系列（五）——怎樣在你的網頁裏嵌入地圖

dandan12 2020-02-21 23:40:06

讓google map 動起來

SHMILYRINGPULL 2020-02-20 22:51:58

Google Map,Baidu Map,latitude,longitude

美國GPS使用的是WGS84的座標系統，以經緯度的形式來表示地球平面上的某一個位置。但在我國，出於國家安全考慮，國內所有導航電子地圖必須使用國家測繪局制定的加密座標系統，即將一個真實的經緯度座標加密成一個不正確的經緯度座標，在業內將前者

tikeyc 2020-07-07 17:33:33

Google Maps 使用PHP/MySQL

Google Maps 使用PHP/MySQL 2009-11-30   This tutorial is intended for developers who are familiar with PHP/MySQL, and want

Wang471981125 2020-06-25 21:34:05