大屏地图标记弹窗完成

components/AiDvRender.vue

@@ -165,24 +165,23 @@ export default {
       let {lib: AMap, map} = this
       this.timer && clearInterval(this.timer)
       if (AMap && map) {
-        let infoWin = new AMap.InfoWindow({content: ""})
+        const infoWin = new AMap.InfoWindow({isCustom: true, content: ""})
         map.clearMap()
-        this.values.filter(e => e.lng).map(e => {
+        map.on('click', () => infoWin.close())
+        this.values.filter(e => e.lng).map((e) => {
+          const {icon = "https://cdn.cunwuyun.cn/dvcp/h5/Location2.png"} = e
           return new AMap.Marker({
             map,
             content: e.content || `<div class="marker ${this.data.alwaysShow ? 'showLabel' : ''}">
-                        <img src="${e.icon}"/>
+                        <img src="${icon}"/>
                         <span>${e.label}</span>
                       </div>`,
             position: [e.lng, e.lat]
           }).on('click', () => {
             if (!!e.openWin || e.infoWindowHtml) {
               map.clearInfoWindow()
-              infoWin.setContent(e.infoWindowHtml ||
-                  [`<div class="infoWin">`,
-                    `<b>${e.label}</b>`,
-                    '</div>'
-                  ].join('')
+              infoWin.setContent(e.infoWindowHtml ? `<div class="mapInfoWin">${e.infoWindowHtml}</div>` :
+                  [`<div class="infoWin">`, `<b>${e.label}</b>`, '</div>'].join('')
               )
               infoWin.open(map, [e.lng, e.lat])
             }
@@ -275,5 +274,16 @@ export default {
       white-space: nowrap;
     }
   }
+
+  :deep(.mapInfoWin) {
+    padding: 16px 8px;
+    max-width: 800px;
+    background-color: rgba(255, 255, 255, 0.25);
+    backdrop-filter: blur(6px);
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
+    border-radius: 4px;
+    color: rgba(255, 255, 255, 0.75);
+  }
 }
 </style>