百度地圖

時間 2019-12-09

標籤百度地圖简体版

原文原文鏈接

開發準備

1 註冊百度地圖帳號

    http://lbsyun.baidu.com/

2 進入控制檯

3 建立應用

2 獲取key

先建立應用
而後申請key：通常3-5個工做日

開發文檔

http://lbsyun.baidu.com/index.php?title=jspopularphp

起步引入百度地圖api 詳細參見文檔 http://lbsyun.baidu.com/index.php?title=jspopular/guide/introduction

1 PC端

2 移動端

將地圖容器高設置爲100%，使其充滿整個屏幕，或者您也能夠計算瀏覽器窗口的大小並進行設置。
添加下面的meta標籤：這樣作是爲了讓頁面以正常比例進行顯示而且禁止用戶縮放頁面的操做。

個人第一個百度地圖詳見 http://lbsyun.baidu.com/index.php?title=jspopular/guide/helloworld

01/helloworld.htmlhtml

控件 01/control.html

Control：控件的抽象基類，全部控件均繼承此類的方法、屬性。經過此類您可實現自定義控件。
NavigationControl：地圖平移縮放控件，PC端默認位於地圖左上方，它包含控制地圖的平移和縮放的功能。移動端提供縮放控件，默認位於地圖右下方。
OverviewMapControl：縮略地圖控件，默認位於地圖右下方，是一個可摺疊的縮略地圖。
ScaleControl：比例尺控件，默認位於地圖左下方，顯示地圖的比例關係。
MapTypeControl：地圖類型控件，默認位於地圖右上方。
CopyrightControl：版權控件，默認位於地圖左下方。
GeolocationControl：定位控件，針對移動端開發，默認位於地圖左下方。

1 向地圖添加控件

    實例化地圖
    var map = new BMap.Map("container");    
    設置座標點及地圖級別
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    
    使用 addControl 添加控件
    map.addControl(new BMap.NavigationControl());

覆蓋物

官方文檔：http://lbsyun.baidu.com/index.php?title=jspopular/guide/covergit

Overlay：覆蓋物的抽象基類，全部的覆蓋物均繼承此類的方法。
Marker：標註表示地圖上的點，可自定義標註的圖標。
Label：表示地圖上的文本標註，您能夠自定義標註的文本內容。
Polyline：表示地圖上的折線。
Polygon：表示地圖上的多邊形。多邊形相似於閉合的折線，另外您也能夠爲其添加填充顏色。
Circle: 表示地圖上的圓。
InfoWindow：信息窗口也是一種特殊的覆蓋物，它能夠展現更爲豐富的文字和多媒體信息。注意：同一時刻只能有一個信息窗口在地圖上打開。 > 可使用map.addOverlay方法向地圖添加覆蓋物，使用map.removeOverlay方法移除覆蓋物，注意此方法不適用於InfoWindow。

1 標註地圖上的點

    var map = new BMap.Map("container");    
    var point = new BMap.Point(116.404, 39.915);    
    map.centerAndZoom(point, 15);    
    var marker = new BMap.Marker(point);        // 建立標註    
    map.addOverlay(marker);                     // 將標註添加到地圖中

2 添加覆蓋物 01/cover1.html

3 設置點的跳動 01/cover2.html

4 設置新圖標 01/cover3.html

更多demo 詳見 http://lbsyun.baidu.com/jsdemo.htm#c1_16程序員

事件

瀏覽器中的JavaScript是「事件驅動的」，這表示JavaScript經過生成事件來響應交互，並指望程序可以「監聽」感興趣的活動。例如，在瀏覽器中，用戶的鼠標和鍵盤交互能夠建立在DOM內傳播的事件。對某些事件感興趣的程序會爲這些事件註冊JavaScript事件監聽器，並在接收這些事件時執行代碼。百度地圖API擁有一個本身的事件模型，程序員可監聽地圖API對象的自定義事件，使用方法和DOM事件相似。但請注意，地圖API事件是獨立的，與標準DOM事件不一樣。api

    var map = new BMap.Map("container");    
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
        //經過addEventListener添加事件   
        map.addEventListener("click", function(){    
        alert("您點擊了地圖。");    
    });

1 圖塊加載完成事件 01/event1.html

2 地圖單擊事件 01/event2.html

3 給覆蓋物註冊事件 01/event3.html

GPS功能

1 單個標註點沿直線的軌跡運動 01/gps1.html

2 多個點沿直線運動 01/gps2.html

3 路書 01/gps3.html

檢索功能

    使用local.search實現搜索功能

    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
    var local = new BMap.LocalSearch(map, {
      renderOptions: {
        map: map
      }
    });
    local.search("景點");