👈 编写高德地图组件

kicc-ui/src/components/AMap/src/Amap.vue

@@ -20,9 +20,11 @@
   });
   /** 地图创建完成(动画关闭) */
   const complete = (): void => {
-    map && map.on('complete', () => {
-      mapState.loading = false;
-    });
+    if (map) {
+      map.on('complete', () => {
+        mapState.loading = false;
+      });
+    }
   };
 
   onBeforeMount(() => {
@@ -59,8 +61,7 @@
         // 地图类型切换插件
         map.addControl(
           new AMap.MapType({
-            defaultType: 1,
-            showRoad: true
+            defaultType: 0
           })
         );
       });
@@ -70,7 +71,7 @@
         gridSize: 80,
         maxZoom: 14,
         renderMarker(ctx) {
-          let { marker, data } = ctx;
+          const { marker, data } = ctx;
           if (Array.isArray(data) && data[0]) {
             const { title, orientation } = data[0];
             const content = `<img width="30px" height="30px" style="transform: scale(1) rotate(${360 - Number(orientation)}deg);" src='${redFlag}'/>`;
@@ -89,20 +90,41 @@
               map.setCenter(lnglat);
             });
           }
+        },
+        renderClusterMarker(ctx) {
+          const { clusterData, marker, count } = ctx;
+          const content = `<img width="30px" height="30px" src='${redFlag}'/>`;
+          marker.setContent(content);
+          const title = count == 1 ? clusterData[0].title : `上级医检医院数量:${count}`;
+          marker.setLabel({
+            direction: 'bottom',
+            //设置文本标注偏移量
+            offset: new AMap.Pixel(-4, 0),
+            //设置文本标注内容
+            content: `<div>${title}</div>`
+          });
+          marker.setOffset(new AMap.Pixel(-18, -10));
+          marker.on('click', ({ lnglat }) => {
+            //设置地图层级
+            map.setZoom(16);
+            map.setCenter(lnglat);
+          });
         }
       });
-
+      largeHospitalMarkerCluster.on('click', (data) => {
+        console.log('数据查看:',data);
+      });
       const largeHospitalPoints = largeHospitalMapList.map((v: any) => ({
         lnglat: [v.lng, v.lat],
         ...v
       }));
+      largeHospitalMarkerCluster?.setData(largeHospitalPoints);
 
-      if (largeHospitalMarkerCluster) largeHospitalMarkerCluster.setData(largeHospitalPoints);
-
+      // 加载完毕
       complete();
-    }).catch(() => {
+    }).catch(error => {
       mapState.loading = false;
-      throw '地图加载失败，请重新加载';
+      throw error;
     });
 
   });

kicc-ui/src/components/AMap/src/data.ts

@@ -13,7 +13,8 @@ type mapType = {
 };
 
 export const largeHospitalMapList: mapType[] = [
-  {title: '上级医院:测试1', orientation: 0, lng: 112.919043, lat: 28.288623},
-  {title: '上级医院:测试2', orientation: 0, lng: 114.71, lat: 34.5394614}
+  {title: '上级医检医院:测试1', orientation: 0, lng: 112.919043, lat: 28.288623},
+  {title: '上级医检医院:测试2', orientation: 0, lng: 112.919165, lat: 28.289924},
+  {title: '上级医检医院:测试3', orientation: 0, lng: 112.919165, lat: 29.289924}
 ];