php,調用百地圖度API實現標記

標籤：des   c   style   class   blog   code   

最近一個項目需要用到地圖的定位和標記功能，本來考慮使用google map API 。但是在國內這個速度確實很慢，有時候載入到一半就出現錯了，不過可以通過google agent 來解決在國內的訪問速度的問題，但是這樣還是很麻煩。所以自己決定使用百度地圖的API來實現。好了直接先上一張吧，地圖的地區是隨便選的。

完成的功能:

1.根據提供的地址在地圖上定位

2.建立了多邊形地區，該地區可以靈活的標記，例如關於一些配送範圍，就可以通過標記來完成。

要實現以上效果需要以下步驟：

1.先申請百度地圖API 的訪問的 key(ak) ,可以通過這個地址來申請:http://lbsyun.baidu.com/apiconsole/key?application=key

在申請key的時候你需要確定的是你的這個key的應用類型是什麼,server or mobile ... 可以參考：

2.在你的工程中直接引入百度V1.3的介面檔案

<script src="http://api.map.baidu.com/api?v=1.3&ak=you key"  type="text/javascript"></script>

其中如果你引入的版本低於1.3，那麼這塊需要將ak換成key 就好了，you key 就是申請的key , 在這裡我的key的應用類型是 for browser的。

3.javascript 代碼部分

    var map = new BMap.Map("container");       var mypoint = new BMap.Point(116.404, 39.915);    // 建立點座標     map.centerAndZoom(mypoint,15); // 初始化地圖，設定中心點座標和地圖層級    //    map.setMapType(BMAP_SATELLITE_MAP); 設定地圖類型    var marker = new BMap.Marker( mypoint );    map.addOverlay( marker );    marker.addEventListener("click", function(){                 var infoWin = new BMap.InfoWindow("your show information");//定義顯示資訊                         this.openInfoWindow(infoWin);    });        var x1 = mypoint.lat+0.002;    var x2 = mypoint.lat- 0.002;    var y1 = mypoint.lng + 0.002;    var y2 = mypoint.lng - 0.002;                 var secRing = [            new BMap.Point(y1, x1),  // 經度 緯度            new BMap.Point(y1, x2),            new BMap.Point(y2, x2),            new BMap.Point(y2, x1)        ];                        //建立多邊形    var secRingPolygon = new BMap.Polygon(                secRing,                {                    strokeColor:"#f50704",                    fillColor:"#FF0000",                    strokeWeight:2,                     fillOpacity:0,                    strokeOpacity:0.8                }    );    map.addOverlay(secRingPolygon);    map.enableScrollWheelZoom();    //啟用滾輪放大縮小，預設禁用    map.enableContinuousZoom();    //啟用地圖慣性拖拽，預設禁用    // 建立Map執行個體    map.addControl(new BMap.NavigationControl());  //添加預設縮放平移控制項    map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));   //右下角，開啟        

其中 secRing 部分是構造矩形地區的代碼，該矩形地區是由API中提供的 Polygon 來實現的。以上代碼的效果是該多邊形地區是不可以自由標記的。所以需要在把secRingPolygon加到map之前，需要用以下代碼來允許該多邊形地區可編輯。

secRingPolygon.enableEditing();

以上的代碼就可以實現。但是如果需要把多邊形每次編輯的座標記錄下來，或者是記錄編輯地區的運動軌跡，那麼就需要secRingPolygon添加一個事件(mouseout),然後通過getPath這個函數來擷取編輯後的軌跡。如果有業務的需求，你可以把該軌跡儲存到資料庫中，當下次載入的時候，你可以直接把該軌跡估值給secRing 這個數組，這樣你的標記就可以在地圖上顯示。

//添加事件            secRingPolygon.addEventListener("mouseout", function(){                var pathObj = secRingPolygon.getPath();            var htmlStr = "";            for(var i in pathObj){                var position = pathObj[i];                htmlStr += position.lng +","+position.lat+ "<br>";                        }             document.getElementById(‘info‘).innerHTML = htmlStr        }); 

這塊直接把運動後的軌跡輸出到頁面。

還有就是如果通過一個給定的地址來在地圖上標記出來，目前採用的是通過PHP提供的curl介面，調用geocoder的v2 api 來得到改地址的經緯度。

可以參考：http://developer.baidu.com/map/webservice-geocoding.htm

該介面返回的參數格式可以選擇json或者是其它的。json格式返回結果的如下：

//不帶回呼函數的傳回值{    status: 0,    result:     {        location:         {            lng: 116.30814954222,            lat: 40.056885091681        },    precise: 1,    confidence: 80,    level: "商務大廈"    }}

PHP代碼如下：

        $address = urlencode($addr);        $url = "http://api.map.baidu.com/geocoder/v2/?address=$address&output=json&ak=your key";        $ch = curl_init();        curl_setopt($ch, CURLOPT_URL, $url);        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);        curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);        $response = curl_exec($ch);        curl_close($ch);        $result = json_decode($response, true);        $lat = $result["result"]["location"]["lat"];        $lng = $result["result"]["location"]["lng"];

其中你的 addr就是地址，需要用urlencode進行轉義。

這樣你就可以擷取到當前地址的經度和緯度資訊，然後輸出到前端，再調用 new BMap.Point(lat,lng); 來進行渲染。

這塊你可以對baidu map API 再次封裝，供項目中其它的地方使用。地圖API的功能遠不止這些，還有很多用法可以直接參考百度 map API 的手冊。

還有更多的demo可以參考:http://developer.baidu.com/map/jsdemo.htm

好了！！！！