百度地圖API

一、介紹及使用

         1.介紹

                   由JavaScript語言編寫的應用程式介面

              支援PC端和移動端基於瀏覽器的地圖應用開發，支援HTML5特性的地圖開發

         2.使用

                   1.申請API 祕鑰 (ak)

                     在百度地圖API平臺上申請即可獲得

引用程式碼：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=祕鑰號"> 

二、基本函式

         1.建立地圖

        var map =new BMap.Map("id");

        API使用BMmp作為名稱空間，所有類都在名稱空間中

               Map類表示地圖，用於新建地圖，引數為元素id

2.建立點座標

        var point =new BMap.Point(經度,緯度);

          Point類新建點

3.地圖初始化

        map.centerAndZoom(point,15);

          centerAndZoom引數為中心點和地圖級別(縮放大小)

三、控制元件

使用Map.addControl()方法新增控制元件

              常用控制元件:

new BMap.NavigationControl()     //縮放控制元件

new BMap.ScaleControl()           //比例尺控制元件

new BMap.OverviewMapControl()    //縮圖控制元件

new BMap.MapTypeControl()         //地圖類控制元件

四、覆蓋物

       標註

           1.建立

var marker =new BMap.Marker(point);  //Marker建立標註

map.addOverlay(
 
marker);             //addOverlay將標註新增進地圖

2.監聽

    marker.addEventListener("click",function(){事件}

   marker.enableDragging();     //開啟拖拽功能

   marker.addEventListener("dragend",function(e){事件} //拖拽事件

                   3.資訊視窗

    var opts = {    

               width : 250,     // 資訊視窗寬度    

               height: 100,     // 資訊視窗高度    

               title : "Hello"  // 資訊視窗標題   

    }    

    var infoWindow = new BMap.InfoWindow("World", opts);     

map.openInfoWindow(infoWindow, map.getCenter()); 

                   使用InforWindow建立資訊窗，引數為內容和形狀

              使用openInfoWindow開啟視窗，引數為視窗和開啟位置

五、服務

                   1.本地搜尋

    var map = new BMap.Map("container");      

    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);      

    var local = new BMap.LocalSearch(map, {      

                       renderOptions:{map: map}  

               //前一個map是屬性，後一個是地圖名   

    });      

    local.search("天安門");

                   Bmap.LocalSearch提供本地搜尋服務

              引數為 搜尋範圍(map) 搜尋結果(renderOprions)

              search為根據關鍵詞檢索，引數為關鍵詞

                   2.結果面板

        var local = new BMap.LocalSearch(map,   

         {renderOptions: {map: map,panel: "results"}); 

BMap.LocalSearchOptions.renderOptions.panel屬性為結果提供容器，結果自動儲存在容器中

                   3.資料介面

                   獲取詳細資料資訊

var map =new BMap.Map("container");

map.centerAndZoom(new BMap.Point(116.404,39.915),11);

var options ={

       onSearchComplete:function(results){

if(local.getStatus()== BMAP_STATUS_SUCCESS)var s =[];

for(var i =0; i < results.getCurrentNumPois(); i ++)       s.push(results.getPoi(i).title+", "+ results.getPoi(i).address);                  document.getElementById("log").innerHTML= s.join("<br>");}

};

var local =new BMap.LocalSearch(map, options);

local.search("公園");

//關於狀態碼
//BMAP_STATUS_SUCCESS        檢索成功。對應數值“0”
//BMAP_STATUS_CITY_LIST        城市列表。對應數值“1”
//BMAP_STATUS_UNKNOWN_LOCATION        位置結果未知。對應數值“2”
//BMAP_STATUS_UNKNOWN_ROUTE        導航結果未知。對應數值“3”
//BMAP_STATUS_INVALID_KEY        非法金鑰。對應數值“4”
//BMAP_STATUS_INVALID_REQUEST        非法請求。對應數值“5”
//BMAP_STATUS_PERMISSION_DENIED        沒有許可權。對應數值“6” 
//BMAP_STATUS_SERVICE_UNAVAILABLE        服務不可用。對應數值“7”
//BMAP_STATUS_TIMEOUT        超時。對應數值“8”

通過onSearchComplete回撥函式獲得資料，返回值為LocalResult陣列

LocalResult提供getPoi(i)            返回第i+1條索引結果

                              getNumPois         返回總頁數

等方法