vue3使用高德地图画线

Vue 3 可以通过使用高德地图的 JavaScript API 来画线。以下是一个简单的示例：

首先，确保已经引入了高德地图的 JavaScript API。可以在 HTML 文件中添加如下代码：

<script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_API_KEY"></script>

接下来，在 Vue 组件中可以通过以下方式来画线：

<template>
  <div id="map-container"></div>
</template>

<script>
export default {
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 创建地图实例
      const map = new AMap.Map('map-container', {
        zoom: 14,
        center: [YOUR_CENTER_LONGITUDE, YOUR_CENTER_LATITUDE], // 设置地图中心点坐标
      });
      
      // 创建折线实例
      const polyline = new AMap.Polyline({
        path: [
          [START_LONGITUDE, START_LATITUDE], // 起点坐标
          [END_LONGITUDE, END_LATITUDE], // 终点坐标
        ],
        strokeColor: '#3366FF', // 线条颜色
        strokeWeight: 5, // 线条宽度
      });
      
      // 将折线添加到地图上
      map.add(polyline);
    },
  },
};
</script>

<style>
#map-container {
  width: 100%;
  height: 400px;
}
</style>

在以上示例代码中，需要将 `YOUR_API_KEY` 替换为你自己的高德地图 API 密钥。同时，将 `YOUR_CENTER_LONGITUDE`、`YOUR_CENTER_LATITUDE`、`START_LONGITUDE`、`START_LATITUDE`、`END_LONGITUDE`、`END_LATITUDE` 替换为实际的地理坐标。

这样就可以在 Vue 3 中使用高德地图画线了。希望对你有帮助！