图例

src/components/MapView/index.tsx

@@ -8,6 +8,9 @@ export default defineComponent({
   setup(props, ctx) {
     const mapRef = ref<Element>();
 
+    let tipcontentRef = ref<Element>();
+
+
     onMounted(() => {
       const map = new window.minemap.Map({
         container: 'map',
@@ -20,8 +23,10 @@ export default defineComponent({
         // projection: 'MERCATOR',
         logoControl: false,
       });
+      map["tipcontentRef"] = tipcontentRef.value;
       ctx.emit('update:map', map);
     });
-    return () => <div id="map" style={{ height: '100%' }} ref={mapRef} />;
+    
+    return () =>  (<><div id="map" style={{ height: '100%' }} ref={mapRef} /> <div class="maptip" ref={ tipcontentRef }> </div></>);
   },
 });

src/components/MarkerMap/index.scss

@@ -1,139 +1,150 @@
 @import '../../styles/utils.scss';
-
 .card-bg-container {
-  box-sizing: border-box;
-  background-image: url('../../assets/card-bg/frame_filter_center@2x.png');
-  background-position: top center;
-  background-repeat: repeat-y;
-  background-size: cover;
-  .card-border-bottom-left,
-  .card-border-bottom-right,
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    width: px2rem(40px * 2);
-    height: px2rem(40px * 2);
-    background-color: transparent;
-    border-left: px2rem(1px) solid #00a3ff;
-    border-top: px2rem(1px) solid #00a3ff;
-    top: 0;
-    left: 0;
-  }
-  .card-border-bottom-right,
-  &::after {
-    border-left: unset;
-    border-right: px2rem(1px) solid #00a3ff;
-    right: 0;
-    left: unset;
-  }
-  .card-border-bottom-left,
-  .card-border-bottom-right {
-    bottom: 0;
-    top: unset;
-    border-bottom: px2rem(1px) solid #00a3ff;
-    border-top: unset;
-  }
+    box-sizing: border-box;
+    background-image: url('../../assets/card-bg/frame_filter_center@2x.png');
+    background-position: top center;
+    background-repeat: repeat-y;
+    background-size: cover;
+    .card-border-bottom-left,
+    .card-border-bottom-right,
+    &::before,
+    &::after {
+        content: '';
+        position: absolute;
+        width: px2rem(40px * 2);
+        height: px2rem(40px * 2);
+        background-color: transparent;
+        border-left: px2rem(1px) solid #00a3ff;
+        border-top: px2rem(1px) solid #00a3ff;
+        top: 0;
+        left: 0;
+    }
+    .card-border-bottom-right,
+    &::after {
+        border-left: unset;
+        border-right: px2rem(1px) solid #00a3ff;
+        right: 0;
+        left: unset;
+    }
+    .card-border-bottom-left,
+    .card-border-bottom-right {
+        bottom: 0;
+        top: unset;
+        border-bottom: px2rem(1px) solid #00a3ff;
+        border-top: unset;
+    }
 }
 
 .task-map-container {
-  height: 100vh;
-  .minemap-map {
-    .minemap-popup-tip {
-      display: none;
-    }
-    .minemap-popup-content {
-      max-width: unset !important;
-      padding: unset;
-      width: px2rem(332px * 2);
-      // width: 332px;
-      border-radius: unset;
-
-      @extend .card-bg-container;
-
-      background: #010d85;
-      color: #fff;
-
-      .title {
-        padding: px2rem(22px * 2) px2rem(24px * 2) px2rem(15px * 2);
-        box-sizing: border-box;
-        // background: #003a8c;
-        // border-radius: 1px;
-        font-size: px2rem(20px * 2);
-        color: #00e9ff;
-      }
-      .action {
-        margin: 0 px2rem(24px * 2) px2rem(24px * 2);
-      }
-      .content {
-        height: max-content;
-        padding: px2rem(24px * 2);
-        // background: #fff;
-        > div {
-          display: flex;
-          font-size: px2rem(14px * 2);
-          line-height: px2rem(20px * 2);
-          margin-bottom: px2rem(10px * 2);
-          > span:first-child {
-            min-width: max-content;
-          }
+    height: 100vh;
+    .maptip {
+        position: absolute;
+        bottom: px2rem(80px);
+        right: px2rem(20px);
+        color: white;
+        .tipitem {
+            display: block;
+            min-width: px2rem(92px *2);
+            margin-top: px2rem(40px);
+            ;
+            #marker {
+                display: inline-block;
+                vertical-align: middle;
+                margin-right: 10px;
+            }
         }
-      }
-    }
-  }
-  .address-type-card-container {
-    &.in-detail {
-      position: absolute;
-      height: px2rem(554px * 2 - 182px + 390px * 2 - 172px + 48px);
-      right: px2rem((939px + 30px + 30px) * 2);
-      top: calc(50% + px2rem(52px * 2));
-      transform: translateY(calc(-50% - px2rem(52px / 2 * 2)));
-      .address-type-card {
-        top: 0;
-        right: 0;
-        animation: fadeInRight 1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
-      }
     }
-  }
-  .address-type-card {
-    position: absolute;
-    top: px2rem(83px * 2);
-    right: px2rem(30px * 2);
-    // min-width: px2rem(178px);
-    // min-height: px2rem(293px);
-    width: max-content;
-    height: max-content;
-    border-radius: 1px;
-    padding: px2rem(27px * 2) px2rem(36px * 2);
-    box-sizing: border-box;
-
-    .el-checkbox__inner {
-      width: px2rem(16px * 2);
-      min-width: 14px;
-      height: px2rem(16px * 2);
-      min-height: 14px;
-      background-color: transparent;
-      &::after {
-        width: px2rem(10px);
-        height: px2rem(20px);
-        left: px2rem(8px);
-      }
+    .minemap-map {
+        .minemap-popup-tip {
+            display: none;
+        }
+        .minemap-popup-content {
+            max-width: unset !important;
+            padding: unset;
+            width: px2rem(332px * 2);
+            // width: 332px;
+            border-radius: unset;
+            @extend .card-bg-container;
+            background: #010d85;
+            color: #fff;
+            .title {
+                padding: px2rem(22px * 2) px2rem(24px * 2) px2rem(15px * 2);
+                box-sizing: border-box;
+                // background: #003a8c;
+                // border-radius: 1px;
+                font-size: px2rem(20px * 2);
+                color: #00e9ff;
+            }
+            .action {
+                margin: 0 px2rem(24px * 2) px2rem(24px * 2);
+            }
+            .content {
+                height: max-content;
+                padding: px2rem(24px * 2);
+                // background: #fff;
+                >div {
+                    display: flex;
+                    font-size: px2rem(14px * 2);
+                    line-height: px2rem(20px * 2);
+                    margin-bottom: px2rem(10px * 2);
+                    >span:first-child {
+                        min-width: max-content;
+                    }
+                }
+            }
+        }
     }
-    .el-checkbox__label {
-      color: #fff;
-      padding-left: px2rem(28px);
+    .address-type-card-container {
+        &.in-detail {
+            position: absolute;
+            height: px2rem(554px * 2 - 182px + 390px * 2 - 172px + 48px);
+            right: px2rem((939px + 30px + 30px) * 2);
+            top: calc(50% + px2rem(52px * 2));
+            transform: translateY(calc(-50% - px2rem(52px / 2 * 2)));
+            .address-type-card {
+                top: 0;
+                right: 0;
+                animation: fadeInRight 1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+            }
+        }
     }
-    .card-item {
-      display: flex;
-      align-items: center;
-      margin-right: 0;
-      padding-bottom: px2rem(40px);
-      & > span {
-        font-size: 14px;
-        font-size: px2rem(16px * 2);
-
-        font-weight: 400;
-      }
+    .address-type-card {
+        position: absolute;
+        top: px2rem(83px * 2);
+        right: px2rem(30px * 2);
+        // min-width: px2rem(178px);
+        // min-height: px2rem(293px);
+        width: max-content;
+        height: max-content;
+        border-radius: 1px;
+        padding: px2rem(27px * 2) px2rem(36px * 2);
+        box-sizing: border-box;
+        .el-checkbox__inner {
+            width: px2rem(16px * 2);
+            min-width: 14px;
+            height: px2rem(16px * 2);
+            min-height: 14px;
+            background-color: transparent;
+            &::after {
+                width: px2rem(10px);
+                height: px2rem(20px);
+                left: px2rem(8px);
+            }
+        }
+        .el-checkbox__label {
+            color: #fff;
+            padding-left: px2rem(28px);
+        }
+        .card-item {
+            display: flex;
+            align-items: center;
+            margin-right: 0;
+            padding-bottom: px2rem(40px);
+            &>span {
+                font-size: 14px;
+                font-size: px2rem(16px * 2);
+                font-weight: 400;
+            }
+        }
     }
-  }
-}
+}

src/components/MarkerMap/index.tsx

@@ -596,10 +596,36 @@ export default defineComponent({
           });
         },
       );
+      try {
+        var html = document.createElement("div");
+        actionTypes.value.forEach(atypes => {
+          if (atypes?.action == null) return;
+          var name = atypes.type;
+          var args1 = atypes?.action?.toString().match(/\s.*?\(([^)]*)\)/) != null ? atypes?.action?.toString().match(/\s.*?\(([^)]*)\)/)![1] : ",,";
+          // debugger
+          var args = args1.split(",");
+          if (args[2] == undefined) return;
+          var div = document.createElement("div");
+          div.className = "tipitem"
+          var imagee = renderElement((eval(args[2])));
+          div.append(imagee);
+          var c = document.createElement("span"); c.innerHTML = (name);
+          div.append(c);
+          html.append(div);
+          
+        });
+        state.map["tipcontentRef"].append(html);
+
+       
+
+      } catch (ee) { 
+
+      }
+      
+      
 
       state.map.on('load', function () {
         updateTrafficSource();
-
         //如果底图没有配置路况图层，需要自己手动增加
         state.map.addLayer({
           id: 'trafficlines',
@@ -694,6 +720,8 @@ export default defineComponent({
       },
     );
 
+  
+
     return () => (
       <div class="task-map-container">
         <MapView v-model:map={state.map} />