KC10880109-i13百度地圖API學習總結_第1頁
KC10880109-i13百度地圖API學習總結_第2頁
KC10880109-i13百度地圖API學習總結_第3頁
KC10880109-i13百度地圖API學習總結_第4頁
KC10880109-i13百度地圖API學習總結_第5頁
已閱讀5頁，還剩2頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

1、百度地圖API學習總結一、百度地圖API介紹 百度地圖API是可以給開發人員調用的開放API，我們可以用Javascript語言進行調用；聽起來API這個概念很抽象，初學者想：“百度的API，我們怎么能調用？”，其實不是這樣，我們通過一個URL地址進行引用，然后就可以調用他的API；不需要Web服務器，只需要一個瀏覽器就能夠使用百度地圖API； 二、調用API的基本文件格式 以下為開發百度地圖API的最基礎代碼：html view plaincopy<html>      <h

2、ead>          <!-引用百度地圖->          <script type="text/javascript" src="        </script>     

3、;     <title>              如何調用API          </title>               &

4、#160;  <!-          設計樣式               container容器：占50%大小          ->      

5、0;   <style type="text/css">          #container              width:50%;            

6、  height:50%;                     </style>      </head>      <body>      

7、0;   <div id="container"></div>          <script type="text/javascript">              var map = new

8、60;BMap.Map("container");/在container容器中創建一個地圖,參數container為div的id屬性;              var point = new BMap.Point(500,500);/定位             &#

9、160;map.centerAndZoom(point,15);                /將point移到瀏覽器中心，并且地圖大小調整為15;                        &

10、#160;   <!-以后只需要在此處添加代碼即可->          </script>      </body>  </html>   三、常用技術1.創建地圖： var map = new BMap.Map("divid");2.創建坐標點：var point = new BMap.

11、Point("經度","緯度");3.設置視圖中心點：map.centerAndZoom(point,size);4.激活滾輪調整大小功能：map.enableScrollWheelZoom();5.添加控件：map.addControl(new BMap.Xxx();6.添加覆蓋物：map.addOverlay();  控件介紹 1.NavigationControl：縮放地圖的控件，默認在左上角；2.OverviewMapControl：地圖的縮略圖的控件，默認在右下方；3.ScaleControl：地圖顯示比例的控件，

12、默認在左下方；4.MapTypeControl：地圖類型控件，默認在右上方；如下圖所示：  map.addControl()方法添加控件；代碼示例： html view plaincopy<html>      <head>          <!-引用百度地圖->        &

13、#160; <script type="text/javascript" src="        </script>          <title>              控件使用&

14、#160;         </title>                  <!-          設計樣式        &

15、#160;      container容器：占50%大小          ->          <style type="text/css">          #container&#

16、160;             width:50%;              height:50%;                   

17、;  </style>      </head>      <body>          <div id="container"></div>          <

18、;script type="text/javascript">              var map = new BMap.Map("container");/在container容器中創建一個地圖,參數container為div的id屬性;          

19、;    var point = new BMap.Point(500,500);/定位              map.centerAndZoom(point,15);                /將point移

20、到瀏覽器中心，并且地圖大小調整為15;              map.addControl(new BMap.NavigationControl();              map.addControl(new BMap.MapTypeControl();   

21、           map.addControl(new BMap.ScaleControl();              map.addControl(new BMap.OverviewMapControl();         &#

22、160;</script>      </body>  </html>  覆蓋物介紹 覆蓋物就是覆蓋在地圖上的某個事物； 1.標注：Marker (1)在point處添加標注：var marker = new BMap.Marker(point);     (2)添加覆蓋物：map.addOverlay(marker);(3)激活標注的拖拽功能：marker.enableDragg

23、ing();(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

24、");(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&

25、#160;view plaincopy<html>      <head>          <!-引用百度地圖->          <script type="text/javascript" src="   &#

26、160;    </script>          <title>              如何調用API          </title>   &

27、#160;              <!-          設計樣式               container容器：占50%大小     

28、60;    ->          <style type="text/css">          #container              width:50%;

29、              height:50%;                     </style>      </head>  

30、0;   <body>          <div id="container"></div>          <script type="text/javascript">       &

31、#160;      var map = new BMap.Map("container");/在container容器中創建一個地圖,參數container為div的id屬性;              var point = new BMap.Point(116.404, 39.915

32、);/定位              map.centerAndZoom(point,15);                /將point移到瀏覽器中心，并且地圖大小調整為15;          

33、                  /標注              var marker = new BMap.Marker(point);        &

34、#160;     map.addOverlay(marker);              marker.addEventListener("click",function() /點擊標注時出發事件               

35、   alert("您點擊了標注");              );              marker.enableDragging();    /標注可拖拽     &#

36、160;                      /創建信息窗口              var opts =         

37、;            width : 250,     / 信息窗口寬度                    height: 100,    &

38、#160;/ 信息窗口高度                    title : "Hello"  / 信息窗口標題                 

39、               var infoWindow = new BMap.InfoWindow("World", opts);  / 創建信息窗口對象                

40、map.openInfoWindow(infoWindow, map.getCenter();      / 打開信息窗口                             /折線              var polyline = new BMap.Polyline(             &

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論