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

最新推荐文章于 2025-07-04 11:05:59 发布

weixin_30894583

最新推荐文章于 2025-07-04 11:05:59 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/leiting/p/9874905.html

本文介绍如何使用AMap API在地图容器中绘制从起点到终点的驾车路线，包括地图初始化、路线规划策略设定及路线绘制过程。通过解析路线数据，实现起点、终点标记与路线的动态展示。

地图容器：

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