update

src/assets/less/amap-item.less

@@ -1,65 +1,79 @@
 //高德信息弹窗
 .amap-info-contentContainer {
-    .amap-content-body {
-        background: #00152B;
-        border: 1px solid #129BFF;
+  .amap-content-body {
+    background: #00152B;
+    border: 1px solid #129BFF;
 
-        .amap-lib-infowindow {
-            background: #00152B;
+    .amap-lib-infowindow {
+      background: #00152B;
 
-            .amap-lib-infowindow-title {
-                color: #fff;
-                border-bottom: 1px solid #129BFF;
-                padding: 4px 0;
-            }
+      .amap-lib-infowindow-title {
+        color: #fff;
+        border-bottom: 1px solid #129BFF;
+        padding: 4px 0;
+      }
 
-            .amap-lib-infowindow-content {
-                color: #fff;
-                padding: 4px 0;
-            }
-        }
+      .amap-lib-infowindow-content {
+        color: #fff;
+        padding: 4px 0;
+      }
     }
+  }
 
-    .amap-combo-close {
-        top: 5px;
-        right: 7px;
-    }
+  .amap-combo-close {
+    top: 5px;
+    right: 7px;
+  }
 }
 
 
 /*地图元素样式---start*/
 //marker
 .amap-marker-label {
-    padding: 0;
-    border: none;
+  padding: 0;
+  border: none;
 }
 
 .alarm-content {
-    background-color: #263d5e;
+  background-color: #263d5e;
+  color: #fff;
+  font-size: 14px;
+  padding: 7px 10px;
+  border: 1px solid #1b7ef2;
+  position: relative;
+
+  .close-btn {
+    position: absolute;
+    top: -6px;
+    right: -8px;
+    width: 15px;
+    height: 15px;
+    font-size: 12px;
+    background: #ccc;
+    border-radius: 50%;
     color: #fff;
-    font-size: 14px;
-    padding: 7px 10px;
-    border: 1px solid #1b7ef2;
-    position: relative;
+    text-align: center;
+    line-height: 15px;
+    box-shadow: -1px 1px 1px rgba(10, 10, 10, 0.2);
+  }
 
-    .close-btn {
-        position: absolute;
-        top: -6px;
-        right: -8px;
-        width: 15px;
-        height: 15px;
-        font-size: 12px;
-        background: #ccc;
-        border-radius: 50%;
-        color: #fff;
-        text-align: center;
-        line-height: 15px;
-        box-shadow: -1px 1px 1px rgba(10, 10, 10, 0.2);
-    }
-
-    .close-btn:hover {
-        background: #666;
-    }
+  .close-btn:hover {
+    background: #666;
+  }
 }
 
-/*地图元素样式---end*/
+/*地图元素样式---end*/
+/*infoWindow*/
+.amap-info-content {
+  width: 100%;
+  height: 100%;
+  background: url("../images/info-modal.png") no-repeat center;
+  background-size: 100% 100%;
+  //padding: 16px 18px 22px 10px;
+}
+
+.amap-info-contentContainer {
+  .amap-info-sharp {
+    border-top: none;
+  }
+}

src/assets/mapUtils/map.ts

@@ -16,6 +16,7 @@ export const Map = {
     airMarkerList: [], //直升机markerList
     placeSearch: null, //地点查询
     marker: null, // 健康终端报警
+    infoWindow: null, //地图弹窗
     /**
      * @desc 地图舒适化
      * @param el dom元素 id选择器
@@ -101,6 +102,7 @@ export const Map = {
             this.airMarkerList = [];
         }
         this.clearActiveHospital();
+        this.clearInfoModal();
         // this.map.remove(this.airMarkerList);
     }, //
     /**
@@ -132,6 +134,8 @@ export const Map = {
                 position: [lon, lat], // 指定点的icon，也可以是个url ，但这样就不能对图片进行设置了
                 icon: startIcon, //启用点击事件 如果需要点击事件，必须开启
                 clickable: true, //点额外携带的数据，用户自定义属性，支持JavaScript API任意数据类型
+                offset: [-18, -32],
+                maxZoom: 14,
                 extData: result[i],
                 label: {
                     content: isFunction(extData?.content) && extData?.content(result[i]),
@@ -277,4 +281,24 @@ export const Map = {
             this.marker = null;
         }
     },
+    /**
+     * @desc 创建地图详情弹窗
+     *
+     * */
+    createInfoModal({ option, content }) {
+        let { lat, lng } = option;
+        this.infoWindow = new AMap.InfoWindow({
+            position: [lng, lat],
+            offset: new AMap.Pixel(-5, -25),
+            content: content,
+            closeWhenClickMap: true,
+        });
+        this.infoWindow.open(this.map);
+    },
+    clearInfoModal() {
+        if (this.infoWindow) {
+            this.infoWindow?.setMap(null);
+            this.infoWindow = null;
+        }
+    },
 };