vue3 高德地图 聚合图

要在Vue3中使用高德地图聚合图，可以按照以下步骤进行：

1. 安装高德地图的JavaScript API

   <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>

2. 在Vue3项目中安装`vue-amap`插件

   npm install vue-amap --save

3. 在`main.js`中引入`vue-amap`插件，并进行配置

   import VueAMap from 'vue-amap';
   Vue.use(VueAMap);
   VueAMap.initAMapApiLoader({
     key: '您申请的key值',
     plugin: ['AMap.MarkerClusterer'],
     v: '1.4.15',
   });

4. 在Vue3组件中使用高德地图聚合图

   <template>
     <div>
       <el-amap :zoom="zoom" :center="center">
         <el-amap-marker-clusterer :grid-size="80" :render-clusters="renderClusters">
           <el-amap-marker v-for="(item, index) in markers" :key="index" :position="item.position" :ext-data="item"></el-amap-marker>
         </el-amap-marker-clusterer>
       </el-amap>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         zoom: 11,
         center: [116.397428, 39.90923],
         markers: [
           { position: [116.403981, 39.915599] },
           { position: [116.398764, 39.914888] },
           { position: [116.390786, 39.912356] },
           { position: [116.416357, 39.928353] },
           { position: [116.368904, 39.913423] },
         ],
       };
     },
     methods: {
       renderClusters(data) {
         return data.map((item) => {
           return {
             ...item,
             icon: new AMap.Icon({
               size: new AMap.Size(32, 32),
               image: 'https://a.amap.com/jsapi_demos/static/images/marker.png',
               imageSize: new AMap.Size(32, 32),
             }),
           };
         });
       },
     },
   };
   </script>

这样就可以在Vue3项目中使用高德地图聚合图了。