update 对接底部数据，添加地图公共less

src/assets/mapUtils/map.ts

@@ -36,10 +36,9 @@ export const Map = {
             this.drawInnerLine();
             this.drawOutLine();
         });
-    },
-    /**
+    } /**
      * @desc 中国外层边界线
-     */
+     */,
     drawOutLine() {
         let geojson = new AMap.GeoJSON({
             geoJSON: china,
@@ -56,10 +55,9 @@ export const Map = {
             },
         });
         this.map.add(geojson);
-    },
-    /**
+    } /**
      * @desc 中国内层边界线
-     */
+     */,
     drawInnerLine() {
         let geojson = new AMap.GeoJSON({
             geoJSON: chinaInner,
@@ -72,20 +70,19 @@ export const Map = {
             },
         });
         this.map.add(geojson);
-    },
-    // 清空当前地图上除了边界线的覆盖物
+    }, // 清空当前地图上除了边界线的覆盖物
     removeOverlayGroup() {
         this.clearAircraft();
         this.clearOverlay();
         this.clearAirRange();
+        this.clearMarker(); //
         if (this.airMarkerList.length > 0) {
             for (let i = 0; i < this.airMarkerList.length; i++) {
                 this.airMarkerList[i].setMap(null);
             }
         }
         // this.map.remove(this.airMarkerList);
-    },
-    //
+    }, //
     /**
      * @desc 创建覆盖物组，用于批量处理点 （控制显隐，点击事件等）
      * @param result
@@ -95,17 +92,17 @@ export const Map = {
         this.overlayGroup = new AMap.OverlayGroup();
         for (let i = 0; i < result.length; i++) {
             let { type, lon, lat } = result[i];
+            if (!lon || !lat || !type) {
+                continue;
+            }
             // 创建一个 Icon
             let startIcon = typeToIcon(type);
             // 将 icon 传入 marker
             let startMarker = new AMap.Marker({
                 // 点的坐标
-                position: [lon, lat],
-                // 指定点的icon，也可以是个url ，但这样就不能对图片进行设置了
-                icon: startIcon,
-                //启用点击事件 如果需要点击事件，必须开启
-                clickable: true,
-                //点额外携带的数据，用户自定义属性，支持JavaScript API任意数据类型
+                position: [lon, lat], // 指定点的icon，也可以是个url ，但这样就不能对图片进行设置了
+                icon: startIcon, //启用点击事件 如果需要点击事件，必须开启
+                clickable: true, //点额外携带的数据，用户自定义属性，支持JavaScript API任意数据类型
                 extData: result[i],
             });
             // 可以调用setExtData（）设置自定义属性
@@ -174,11 +171,10 @@ export const Map = {
             this.map.remove(this.cluster);
             this.cluster = null;
         }
-    },
-    /**
+    } /**
      * @desc 飞机范围
      * @param list
-     */
+     */,
     createAirRange(list) {
         this.removeOverlayGroup();
         this.circleGroup = new AMap.OverlayGroup();
@@ -193,20 +189,15 @@ export const Map = {
             this.map.remove(this.circleGroup);
             this.circleGroup = null;
         }
-    },
-    /**
+    } /**
      * @desc 地方医院医疗点显示
      * @param cityCode 城市code
      * @param keywords 搜索名称
-     */
+     */,
     createActiveHospital(cityCode: string, keywords = '医院') {
         this.removeOverlayGroup();
         this.clearActiveHospital();
         if (!cityCode) return;
-        // AMap.plugin(['AMap.PlaceSearch'], () => {
-        //     //构造地点查询类
-        //
-        // });
         this.placeSearch = new AMap.PlaceSearch({
             pageSize: 30, // 单页显示结果条数
             pageIndex: 1, // 页码
@@ -226,7 +217,7 @@ export const Map = {
             this.placeSearch = null;
         }
     },
-    createMarker(option) {
+    createMarker(option, callbck: () => {}) {
         this.clearMarker();
         let { lon, lat, zoom = 12 } = option;
         const icon = createIcon({ icon: alarmIcon, iconSize: [36, 42], imageSize: [36, 42] });
@@ -234,17 +225,21 @@ export const Map = {
             position: [lon, lat],
             icon: icon,
             offset: new AMap.Pixel(0, 0), //设置偏移量
-            // label: {
-            //     content: labelContent,
-            //     offset: labelOffset,
-            // },
+            label: {
+                content: `<div class="alarm-content" > 
+                                <div>${option?.realName},${option?.eventType_dictText}</div>
+                           </div>`,
+                offset: new AMap.Pixel(0, -9),
+                direction: 'top',
+            },
         });
         this.map.add(this.marker);
         this.map.setZoomAndCenter(zoom, [lon, lat]);
+        this.marker.on('click', callbck);
     },
     clearMarker() {
         if (this.marker) {
-            this.marker.setMap(null);
+            this.marker?.setMap(null);
             this.marker = null;
         }
     },