js/vue 高德地图绘制驾车路线图

地图容器：

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