這一篇文章將告訴您,若是直接打開高德地圖APP,並展現路線規劃。適合有定位的移動設備,能夠查詢到從「個人位置」到目的地的路徑規劃,並直接導航。javascript
導航是目前JSAPI沒法覆蓋到的高德地圖客戶端的重要功能,目前高德地圖提供了駕車、公交、步行三種方式的導航服務,JSAPI在Driving、Transfer、Walking三個路線規劃插件類中提供了相關功能調起接口,使用這些接口開發者能夠在Web頁面中直接打開客戶端的路線規劃結果界面,也能夠看到客戶端提供的策略更豐富的路線規劃結果,只須要點擊一下即可以開始導航。想要實現這個功能只須要兩步:php
這裏咱們以駕車路線規劃爲例,加載Driving插件,建立Driving對象,同時設置駕車策略爲最短期:css
AMap.plugin(["AMap.Driving"], function() { var drivingOption = { policy:AMap.DrivingPolicy.LEAST_TIME, map:map }; var driving = new AMap.Driving(drivingOption); //構造駕車導航類 });
Driving對象建立完畢以後,只須要在須要的地方調用searchOnAMAP方法就能夠了,下面代碼中是在button的點擊事件中調用的。searchOnAMAP方法接收一個JSON對象參數,對象中須要指定路線規劃的起終點座標,同時也能夠設定起終點名稱,示例代碼中咱們利用了JSAPI路線規劃的結果數據中的起終點座標。調起高德地圖客戶端以後,只要點擊‘開始導航’就能夠使用導航功能了:html
//根據起終點座標規劃駕車路線 driving.search( [{keyword:'北京站'},{keyword:'北京大學'}], function(status,result){ button.onclick = function(){ driving.searchOnAMAP({ origin:result.origin, destination:result.destination }); } });
查看所有源代碼java
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title></title> <style> body,#mapContainer{ margin:0; height:100%; width:100%; text-align: center; font-size:12px; } .panel{ position: absolute; top:15px; right: 15px; } .qrcodetxt{ background-color: #0D9BF2; padding: 6px; color: white; } .center{ position: absolute; width: 100%; bottom: 24px; } .btmtip { cursor: pointer; border-radius: 5px; background-color: #0D9BF2; padding: 6px; width: 160px; color: white; margin: 0 auto; } </style> <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main.css?v=1.0?v=1.0" /> <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申請的key值&plugin=AMap.ToolBar"></script> <script> function init() { var button = document.getElementById('bt'); map = new AMap.Map("mapContainer"); AMap.plugin(["AMap.Driving"], function() { var drivingOption = { policy:AMap.DrivingPolicy.LEAST_TIME, map:map }; var driving = new AMap.Driving(drivingOption); //構造駕車導航類 //根據起終點座標規劃駕車路線 driving.search([{keyword:'北京站'},{keyword:'北京大學'}],function(status,result){ button.onclick = function(){ driving.searchOnAMAP({ origin:result.origin, destination:result.destination }); } }); }); map.addControl(new AMap.ToolBar()); if(AMap.UA.mobile){ document.getElementById('bitmap').style.display='none'; bt.style.fontSize = '16px'; }else{ bt.style.marginRight = '10px'; } } </script> </head> <body onload="init()"> <div id="mapContainer" ></div> <div class='center'> <div id='bt' class="btmtip">點擊去高德地圖</div> </div> <div class="panel" id='bitmap' style='top:15px'> <img src="http://a.amap.com/lbs/static/img/drivingonapp.png" style='width:120px;height:120px'> <div class='qrcodetxt' style='text-align: center'>手機掃碼打開demo</div> </div> </body> </html>
---------------------------------------------------------------------------------------------------------------web
即日起至 2016/10/31 止,凡註冊成爲高德開發者的新用戶,便可獲贈 1 張阿里雲優惠券,可享受最低 6 折購買阿里雲產品。數量有限,發完即止。詳情點擊: http://lbsbbs.amap.com/forum.php?mod=viewthread&tid=20143api