JS 百度地圖導航

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

不想看步驟的能夠直接下載DEMO 下載

1、獲取目的地座標

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

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

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

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

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

導航接口爲 ：

• 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 下載