高德地图大于16个途经点生成线路方案(VUE技术栈)

# 开发需求

最近做了一个装配运输的项目，其中有一个【线路规划】的功能，用户输入起点、终端后默认生成一条导航路线，需要设置途径点来合理规划地图线路，并且需要对每个途径点进行车速限制。

# 实现过程

# 1. 通过高德自带的拖拽生成途径点来完成

<script type="text/javascript">
    var map, route, marker;
    //基本地图加载
    map = new AMap.Map("container", {
        resizeEnable: true
    });
    //绘制初始路径
    var path = [];
    path.push([116.303843, 39.983412]);
    path.push([116.321354, 39.896436]);
    path.push([116.407012, 39.992093]);
    map.plugin("AMap.DragRoute", function() {
        route = new AMap.DragRoute(map, path, AMap.DrivingPolicy.LEAST_FEE); //构造拖拽导航类
        route.search(); //查询导航路径并开启拖拽导航
    });
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

官方的demo相当给力，几行代码就实现了可自由拖拽的功能，第一反应就用这个了，基本功能也能满足。

官方实现效果如下：

实现效果

在实现点击途经点设置限速的时候，居然发现官方没有给这些生成的途径点提供回调方法，有点儿坑。

设置途经点点击方法

// 通过官方的mousemove方法来实时获取当前鼠标在地图上的位置
triggerClick() {
  const that = this
  that.map.on('mousemove', function(ev) {
  	var lnglat = ev.lnglat
  	that.currentLngLat = lnglat // 将经纬度信息保存下来
	})
},
addMarkerClick() { // 定义点击方法
      const that = this
      var infoWindow = new that.AMap.InfoWindow({
        offset: new that.AMap.Pixel(0, -20)
      })
      // 拿到地图上的marker 点

      setTimeout(() => {
        var dom = document.getElementById('container').getElementsByClassName('amap-marker') // 获取地图上所有途径点的dom
        dom = Array.from(dom).filter((item) => {
          if (item.style.display !== 'none') {
            return item
          }
        })
        dom.forEach((item, index) => { // 遍历dom
          const img = item.getElementsByTagName('img')[0]
          if (img) {
            img.onclick = (e) => { // marker 点击事件
              const list = [ // 经纬度数组格式数据
                that.currentLngLat.lng,
                that.currentLngLat.lat
              ]
              const distanceList = this.mapData.waypoints.map(item => { // 获取每个途经点到当前点距离list
                const p = [item.lng, item.lat]
                return that.AMap.GeometryUtil.distance(list, p)
              })
              const min = Math.min.apply(null, distanceList) // 拿到距离当前位置最近的点
              const index = distanceList.indexOf(min) // 获取索引
              const currentPoint = this.mapData.waypoints[index] // 获取触发点击途经点的经纬度数据
              const LngLat = new that.AMap.LngLat(currentPoint.lng, currentPoint.lat)
              infoWindow.setMap(that.map)
              // 设置marker信息展示内容
              const speedLimit = currentPoint.speedLimit ? currentPoint.speedLimit + 'KM' : '未设置'
              infoWindow.setContent(
                '<b>报警信息 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b>  <br/><br/>' +
            '<b> 限速： </b> <span class="speed-input">' + speedLimit + '</span><br/><br/>' +
            `<button id="closeBtn" type="button" class="el-button el-button--small" "><span>关闭</span></button> <button id="editBtn" type="button" class="el-button el-button--primary el-button--small"><span>设 置</span></button>`
              )
              infoWindow.open(that.map, LngLat) // 打开弹窗消息
              setTimeout(() => {
                document.getElementById('closeBtn').onclick = () => {
                  infoWindow.close()
                }
                document.getElementById('editBtn').onclick = () => {
                  that.limitSet(index)
                }
              }, 500)
            }
          }
        })
      }, 500)
   }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

到这里之后基本能完成想要的效果了。

拖拽生成点效果