地圖容器：

// css要給此容器設置寬高 <div class="map_container"></div>

畫圖

data{
return {
Clng:"120.267842",
Clat:"30.19439",
　　Flng:"120.267417907715",
　　Flat:"30.19460105896",
　　Tlng:"120.269302368164",
Tlat:"30.2087898254395"
}
}，
mounted(){
　　this.drawMap();
},
methods:{

drawMap() { // 專車--畫地圖let that = this;var map = new AMap.Map('map_container', {resizeEnable: true,zoom:14,center: [that.Clng, that.Clat] // 地圖中心點的經緯度});AMap.plugin('AMap.Driving', function() {var driving = new AMap.Driving({// 駕車路線規劃策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式,還有其他幾種方式見Api文檔 policy: AMap.DrivingPolicy.LEAST_TIME })//起、終點var start_xy = new AMap.LngLat(that.Flng, that.Flat) // 起點的經緯度var end_xy = new AMap.LngLat(that.Tlng, that.Tlat) // 終點的經緯度// 根據起終點經緯度規劃駕車導航路線driving.search(start_xy, end_xy, function(status, result) {if (status === 'complete') {if (result.routes && result.routes.length) {console.log(result.routes[0]);// 繪制第一條路線，也可以按需求繪制其它幾條路線var path = that.parseRouteToPath(result.routes[0])var startMarker = new AMap.Marker({position: path[0],icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',map: map})var endMarker = new AMap.Marker({position: path[path.length - 1],icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',map: map})var routeLine = new AMap.Polyline({path: path,isOutline: true,outlineColor: '#ffeeee',borderWeight: 2,strokeWeight: 5,strokeColor: '#0091ff',lineJoin: 'round'})routeLine.setMap(map)// 調整視野達到最佳顯示區域 map.setFitView([ startMarker, endMarker, routeLine ])console.log('繪制駕車路線完成')}} else {console.log('獲取駕車數據失敗：' + result)}});}) },parseRouteToPath(route) {var path = []for (var i = 0, l = route.steps.length; i < l; i++) {var step = route.steps[i]for (var j = 0, n = step.path.length; j < n; j++) {path.push(step.path[j])}}return path}
}

?

轉載于:https://www.cnblogs.com/leiting/p/9874905.html

總結

以上是生活随笔為你收集整理的js/vue 高德地图绘制驾车路线图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。