外部文件的引入

<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/><script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script><script type="text/javascript"src="https://webapi.amap.com/maps?v=2.0&key=ca11d9894383ee611ed5c6**&plugin=AMap.Driving"></script><script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>

構(gòu)建地圖容器和面板

<div id="container"></div> <div class="info" id="text"><input type="text" id="start" placeholder="單擊左鍵獲取起點(diǎn)位置"><input type="text" id="end" placeholder="單擊右鍵獲取終點(diǎn)位置"><button id="btn">查詢路線</button> </div> <div id="panel"></div>

起終點(diǎn)位置經(jīng)緯度的駕車規(guī)劃路線

//基本地圖加載var map = new AMap.Map("container", {resizeEnable: true,center: [121.548181, 29.806906],zoom: 13});//構(gòu)造路線導(dǎo)航類var driving = new AMap.Driving({map: map,// panel: "panel"});//默認(rèn)路線;var start = '121.546266,29.80975';var end = '121.549957,29.809508';getGis(start, end);document.querySelector("#btn").onclick = function getLngLat() {var start1 = document.querySelector("#start").value;var end1 = document.querySelector("#end").value;getGis(start1, end1);}/* AMap.event.addListener(map, "click", function (e) {console.log(e)});*/map.on("click", function (e) {var lnglat = e.lnglat.getLng() + "," + e.lnglat.getLat();console.log(lnglat);document.querySelector("#start").value = lnglat;});map.on("rightclick", function (e) {var lnglat = e.lnglat.getLng() + "," + e.lnglat.getLat();console.log(lnglat);document.querySelector("#end").value = lnglat;});//計(jì)算起始點(diǎn)的路線規(guī)劃;function getGis(start, end) {var lng1 = start.split(',')[0];var lat1 = start.split(',')[1];var lng2 = end.split(',')[0];var lat2 = end.split(',')[1];// 根據(jù)起終點(diǎn)經(jīng)緯度規(guī)劃駕車導(dǎo)航路線driving.search(new AMap.LngLat(lng1, lat1), new AMap.LngLat(lng2, lat2), function (status, result) {// result 即是對(duì)應(yīng)的駕車導(dǎo)航信息console.log(result.routes[0].distance + '米');console.log(parseFloat(result.routes[0].time / 60).toFixed(2) + '分鐘');if (status === 'complete') {log.success('繪制駕車路線完成')} else {log.error('獲取駕車數(shù)據(jù)失敗：' + result)}});}

lockdatav Done!

總結(jié)

以上是生活随笔為你收集整理的高德地图进阶开发实战案例(10):地图选取起终点OD位置经纬度的驾车规划路线的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。