地圖容器：

// 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
    }
}

總結

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

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