vue高德地图多个点标记

在Vue中使用高德地图可以通过引入AMap库实现。在实现多个点标记时，需要先定义一个地图容器，然后通过循环遍历数据数组，在每个数据项上添加一个标记点。

以下是一个简单的示例代码：

<template>
  <div id="map-container" style="height: 400px;"></div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  name: 'Map',
  data() {
    return {
      map: null, // 地图对象
      markers: [ // 标记点数据数组
        { lnglat: [116.397428, 39.90923], title: 'Marker1' },
        { lnglat: [116.397428, 39.90963], title: 'Marker2' },
        { lnglat: [116.397928, 39.90963], title: 'Marker3' }
      ]
    };
  },
  async mounted() {
    await AMapLoader.load({
      key: 'your amap key',
      version: '2.0',
      plugins: ['AMap.ToolBar']
    });
    this.initMap();
  },
  methods: {
    initMap() {
      this.map = new window.AMap.Map('map-container', {
        zoom: 13,
        center: [116.397428, 39.90923]
      });
      this.addMarkers(); // 添加标记点
    },
    addMarkers() {
      this.markers.forEach(marker => {
        const [longitude, latitude] = marker.lnglat;
        const markerObj = new window.AMap.Marker({
          position: [longitude, latitude],
          title: marker.title,
          map: this.map
        });
        markerObj.on('click', () => {
          console.log(marker.title);
        });
      });
    }
  }
};
</script>

在上述代码中，首先通过AMapLoader引入高德地图API，并在mounted钩子函数中初始化地图。然后在addMarkers方法中遍历标记点数据数组，创建标记点对象，设置位置、标题、地图等属性，并在地图上添加标记点对象。最后通过on方法为每个标记点添加点击事件。

在模板中只需要定义一个地图容器元素即可，地图会自动填充该元素的大小。

需要注意的是，在使用高德地图API时需要先申请key，并在引入API时传入key值。同时，由于高德地图API是异步加载的，因此需要使用await关键字等待API加载完毕后再执行地图相关操作。