JS 百度地圖導航

上一篇文章中我們就簡單的學習了HTML5 地理定位，那麼今天告訴大家我在項目中遇到的一個問題吧，就是怎麼實現點擊一個按鈕就可以調到百度地圖，並且獲取到你當前的位置，並且導航到指定的地方去。

不想看步驟的可以直接下載DEMO 下載

一、獲取目的地坐標

打開百度地圖API 滑鼠點擊拾取坐標網頁，http://api.map.baidu.com/lbsapi/getpoint/index.html，通過先縮小再放大，定位到拾取坐標的建築物。

以北京的朝陽公園為例，定位如下：

滑鼠點擊的位置就是朝陽公園的坐標：

116.488543, 39.949804  //這分別表示經度和緯度。

二、百度地圖公交、駕車、步行導航

導航介面為 ：

• http://api.map.baidu.com/direction //PC&Webapp服務地址

具體的參數問題請看API：

• http://developer.baidu.com/map/wiki/index.php?title=uri/api/web

示例

http://api.map.baidu.com/direction?origin=latlng:34.264642646862,108.95108518068|name:我家&destination=大雁塔&mode=driving&region=西安&output=html&src=yourCompanyName|yourAppName

//調起百度PC或Web地圖，展示”西安市”從（lat:34.264642646862,lng:108.95108518068 ）”我家”到”大雁塔”的駕車
路線。

我在項目中要做的是獲取當前的位置，然後導航到指定的項目如下：

<script>
    var x=document.getElementById("demo");
    function getLocation(){
       if (navigator.geolocation){
           navigator.geolocation.getCurrentPosition(showPosition);
       }else{
           x.innerHTML="Geolocation is not supported by this browser.";
       }
    }
    function showPosition(position){
        x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude;
        window.location.href="http://api.map.baidu.com/direction?origin=latlng:"+position.coords.latitude+","+position.coords.longitude+"|name:我家&destination=僑鑫匯悅台&mode=driving&region=廣州&output=html&src=yourCompanyName|yourAppName";
    }
 </script>

很顯然我們實現的就是兩個步驟

1. getLocation() —> JS 利用html5 地理定位功能，獲取當前的經緯度
2. showPosition()—>根據經緯度和百度API 拼接成自己的URL

實現的效果如圖所示

這個就是可以在移動端或者PC都可以實現的導航到指定位置的功能。

PS： 其實這個功能比較簡單，百度的API可以實現的功能很強大，有興趣的伙伴可以自己去研究一下。需要 demo加QQ 自己下載吧，祝學習愉快。

DEMO 下載