vue 高德地图编辑路线

你可以使用高德地图的 JavaScript API 结合 Vue 来编辑路线。以下是一个基本的示例代码：

1. 在 Vue 组件中引入高德地图的脚本

<template>
  <div id="mapContainer"></div>
</template>

<script>
export default {
  mounted() {
    const script = document.createElement("script");
    script.src = "https://webapi.amap.com/maps?v=1.4.15&key=your-amap-key";
    script.async = true;
    script.onload = this.initMap;
    document.head.appendChild(script);
  },
  methods: {
    initMap() {
      // 初始化地图
      const map = new AMap.Map("mapContainer", {
        // 地图配置参数
      });

      // 在地图上添加绘制工具插件
      AMap.plugin(["AMap.MouseTool"], () => {
        const mouseTool = new AMap.MouseTool(map);
        
        // 监听绘制完成事件
        mouseTool.on("draw", e => {
          const path = e.obj.getPath(); // 获取绘制的路线坐标数组
          console.log(path);
          // 这里可以进行其他操作，比如保存路线坐标数据到数据库等
        });

        // 开启绘制模式
        mouseTool.polyline();
      });
    },
  },
};
</script>

2. 替换 `your-amap-key` 为你自己申请的高德地图 API Key。

这样就可以在 Vue 中使用高德地图的 JavaScript API 来编辑路线了。你可以根据需要选择绘制工具，比如 `AMap.MouseTool` 提供了绘制点、线、面等功能。在绘制完成时，你可以获取到绘制的路线坐标数据进行后续操作。