大屏地图标记弹窗完成

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>

packages/bigscreen/designer/components/form/DataConfig.vue

@@ -136,7 +136,7 @@
           </el-form-item>
         </div>
         <el-form-item label="弹窗内容">
-          <ai-editor v-model="form.winInfo" :instance="instance"/>
+          <ai-editor v-model="form.infoWindowHtml" :instance="instance"/>
         </el-form-item>
       </el-form>
     </ai-dialog>

vue.config.js

@@ -28,8 +28,7 @@ module.exports = {
     .add(path.resolve(__dirname, 'examples'))
     .add(path.resolve(__dirname, 'ui'))
     .end().use('babel').loader('babel-loader').tap(options => options);
-    config.plugins.delete("friendly-errors");
-    config.plugin("limit").use(require("webpack/lib/optimize/LimitChunkCountPlugin"), [{maxChunks: 5}]).tap(options => options)
+    config.plugin("limit").use(require("webpack/lib/optimize/LimitChunkCountPlugin"), [{maxChunks: 10}]).tap(options => options)
   },
   devServer: {
     host: '0.0.0.0', //主机地址