vue2实现高德地图 JSAPI 2.0可拖拽的路线规划(DragRoute)组件实现对每个经过点设置不同的经过点名称

官方文档及示例

DragRoute相关API

API中没有任何方法让我们对每个经过点进行设置,所以只能我们自己实现

实现效果如下:

集成DragRoute到自己的组件

1. 设置变量

   

2. 引入DragRoute组件

   

3. 

以上步骤完成后就集成了DragRoute组件

对每个经过点设置不同的经过点名称

_path中存储的数据如下图是一个LngLat对象,但是转换为json字符串后就是一个经纬度数组

父组件中

      getRoutePath(childValue){this.form.routePathString=JSON.stringify(childValue)},

将数据库中的数据加载到重新加载到route中

此处我将DragRoute的初始化单独抽取成了一个方法,

此时其实已经完成了目的功能

但是存储到后端后再次加载地图所有的经过点的content都是一样的效果如下:

这是因为我们的路径点的content都在初始化时都被midMarkerOptions设置为相同的了

解决路径点content相同问题

主要的思路是将route中的marker都重新修改content后再重新加载就可以实现了

updateMindPointContext: function () {let pathList = this.route._listconsole.log(pathList)let startPoint = pathList[0]let endPoint = pathList[pathList.length - 1]let mindPoint = []pathList.forEach(item => {if (item.id != startPoint.id && item.id != endPoint.id) {mindPoint.push(item)}})let count = 1mindPoint.forEach(item => {item.marker._opts.label.content = '经过点' + countcount++item.marker.setContent('')//需要set一下上面代码才会生效})pathList = []pathList.push(startPoint)pathList.push(...mindPoint)pathList.push(endPoint)this.route._list = pathList},

然后我们在每次初始化时都调用此方法就解决了

组件代码

父组件使用示例代码