地图组件改造

components/AiDvRender.vue

@@ -22,7 +22,7 @@
                  :theme="theme"
                  :data="values"
                  :ops="chartList[data.config]"/>
-      <ai-map :markers="values" v-else-if="data.type=='map'" :mask="data.mask === '1'" :areaId="data.areaId || user.info.areaId"
+      <ai-map v-else-if="data.type=='map'" :mask="data.mask === '1'" :areaId="data.areaId || user.info.areaId"
               :map-style="`amap://styles/${data.mapStyle}`" :pulseLines="data.pulseLines==1" :map.sync="map" :lib.sync="lib"/>
       <ai-monitor :src="data.src" v-else-if="data.type === 'monitor'" :type="data.monitorType"/>
       <video style="width: 100%; height: 100%; object-fit: fill;" loop :src="data.src" autoplay v-else-if="data.type === 'video'"/>
@@ -69,9 +69,20 @@ export default {
         return []
       }
       return this.data.type === 'map' ? this.data[this.data.dataType].map(e => {
-        return {...e, lng: e['经度'], lat: e['纬度'], label: e['地区名称']}
+        return {lng: e['经度'], lat: e['纬度'], label: e['地区名称'], ...e}
       }) : this.data[this.data.dataType]
     },
+    currentType: v => v.data.type
+  },
+  watch: {
+    values: {
+      immediate: true,
+      deep: true, handler() {
+        if (this.currentType == 'map') {
+          this.renderMap()
+        }
+      }
+    }
   },
   methods: {
     formatTable(data, isShowIndex, rowNum) {
@@ -109,7 +120,7 @@ export default {
         align: ['center', 'center', 'center', 'center', 'center']
       }
     },
-    handleMapClick(count = 0) {
+    renderMap(count = 0) {
       let {lib: AMap, map} = this
       if (AMap) {
         let infoWin = new AMap.InfoWindow({content: ""})
@@ -117,37 +128,35 @@ export default {
         let markers = this.values.filter(e => e.lng).map(e => {
           return new AMap.Marker({
             map,
-            label: e.label,
-            icon: e.icon,
+            content: e.content || `<div class="marker">
+                        <img src="${e.icon}"/>
+                        <span>${e.label}</span>
+                      </div>`,
             position: [e.lng, e.lat]
-          }).on('click', ({target}) => {
-            map.clearInfoWindow()
-            markers?.map(m => m.getIcon() == e.selectedIcon && m.setIcon(e.icon))
-            target.setIcon(e.selectedIcon)
-            infoWin.setContent([
-              `<div class="infoWin">`,
-              `<b>${e.label}</b>`,
-              `<div>累计成交金额：${e['累计成交金额(万)']}万元</div>`,
-              `<div>金融产品：${e['金融产品(万)']}万元</div>`,
-              `<div>融资需求：${e['融资需求(万)']}万元</div>`,
-              '</div>'
-            ].join(''))
-            infoWin.open(map, [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.open(map, [e.lng, e.lat])
+            }
           })
         })
         map.setFitView(markers)
       } else if (count < 10) {
         console.log("正在加载...%s", count)
-        setTimeout(() => this.handleMapClick(++count), 1000)
+        setTimeout(() => this.renderMap(++count), 1000)
       }
     }
   },
   mounted() {
-
     if (this.data.type == 'map') {
-      this.handleMapClick()
-    }
-    else if(this.data.type == 'table'){
+      this.renderMap()
+    } else if (this.data.type == 'table') {
       this.$injectLib("https://cdn.cunwuyun.cn/datav.map.vue.js")
     }
   }
@@ -197,41 +206,28 @@ export default {
     }
   }
 
-  ::v-deep.amap-info-contentContainer {
-    .amap-info-content {
-      background: #0A3257;
-      border: 1px solid #7BE5FF;
-      padding: 16px;
-      font-family: PingFangSC-Semibold, PingFang SC;
 
-      .infoWin {
-        & > b {
-          display: block;
-          font-size: 18px;
-          font-weight: 600;
-          color: #FFFFFF;
-          margin-bottom: 13px;
-        }
+  ::v-deep .marker {
+    position: relative;
 
-        & > div {
-          font-size: 16px;
-          font-weight: 400;
-          color: #7BE5FF;
-
-          & + div {
-            margin-top: 8px;
-          }
-        }
-      }
+    & > img {
+      width: 50px;
+      height: 50px;
     }
 
-    .amap-info-sharp {
-      border-top-color: #0A3257;
+    & > span {
+      display: none;
+    }
 
-      &:after {
-        border-top-color: #7BE5FF;
-        filter: none;
-      }
+    &:hover > span {
+      position: absolute;
+      left: 50%;
+      bottom: 0;
+      transform: translate(-50%, 100%);
+      display: block;
+      color: #fff;
+      font-size: 14px;
+      white-space: nowrap;
     }
   }
 }