vue使用高德地图手动绘制折线方法

在 Vue 中使用高德地图手动绘制折线，可以借助上面提到的高德地图 JavaScript API 中提供的绘制工具库来实现。以下是一个简单的实现方法：

1. 在 Vue 中引入高德地图 JavaScript API 和绘制工具库：

<script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_KEY"></script>
<script src="https://webapi.amap.com/ui/1.0/main.js"></script>

2. 在 Vue 中创建地图实例和绘制工具实例：

export default {
  data() {
    return {
      map: null,
      drawTool: null,
      polyline: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      this.map = new AMap.Map('map-container', {
        center: [116.397428, 39.90923],
        zoom: 13,
      });

      this.drawTool = new AMap.MouseTool(this.map);
    },
  },
};

3. 在 Vue 中添加绘制完成事件监听器并处理绘制结果：

export default {
  methods: {
    // ...
    drawPolyline() {
      this.drawTool.polyline();
      this.drawTool.on('draw', this.handleDrawPolyline);
    },
    handleDrawPolyline(e) {
      const path = e.obj.getPath();
      console.log('绘制完成', path);

      // 处理绘制结果
      this.polyline = new AMap.Polyline({
        path,
        strokeColor: '#3366FF',
        strokeWeight: 5,
      });
      this.polyline.setMap(this.map);

      // 移除事件监听器
      this.drawTool.off('draw', this.handleDrawPolyline);
    },
  },
};

4. 在 Vue 中调用绘制方法开始绘制：

<template>
  <div id="map-container"></div>
  <button @click="drawPolyline">绘制折线</button>
</template>

export default {
  methods: {
    // ...
  },
};

以上是一个简单的实现方法，你可以根据自己的需求进行修改和扩展。