在vue3中，在amap上引入多个坐标点，并进行聚合显示

可以使用AMap的Cluster插件来实现多个坐标点的聚合显示。首先需要在Vue3中安装AMap和Cluster插件，然后在组件中引入AMap和Cluster插件，并在mounted钩子函数中初始化地图和Cluster插件，最后在created钩子函数中获取坐标点数据并添加到地图上即可。以下是一个简单的示例代码：

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

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

export default {
  mounted() {
    AMapLoader.load({
      key: 'your-amap-key',
      version: '2.0',
      plugins: ['AMap.MarkerClusterer']
    }).then(() => {
      this.map = new AMap.Map('map-container', {
        zoom: 10,
        center: [116.397428, 39.90923]
      });
      this.cluster = new AMapCluster({
        map: this.map,
        gridSize: 80,
        renderClusterMarker: this.renderClusterMarker
      });
    });
  },
  created() {
    this.points = [
      { lnglat: [116.405285, 39.904989] },
      { lnglat: [116.407845, 39.914101] },
      { lnglat: [116.418, 39.908] }
    ];
    this.addMarkers();
  },
  methods: {
    addMarkers() {
      const markers = this.points.map(point => {
        return new AMap.Marker({
          position: point.lnglat
        });
      });
      this.cluster.addMarkers(markers);
    },
    renderClusterMarker(context) {
      const div = document.createElement('div');
      div.className = 'cluster-marker';
      div.innerHTML = context.count;
      return div;
    }
  }
}
</script>

<style>
#map-container {
  height: 500px;
}
.cluster-marker {
  background-color: red;
  color: white;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>