地图优化

src/project/xicheng/AppMerchantMap/AppMerchantMap.vue

@@ -60,10 +60,17 @@
         this.isShow = false
         this.map.easeTo({
           center: new this.lib.LatLng(item.lat, item.lng),
-          zoom: 20
+          zoom: 23
         }, {
           duration: 800
         })
+
+        setTimeout(() => {
+          document.querySelectorAll('.marker').forEach(e => {
+            e.classList.remove('marker-active')
+          })
+          document.querySelector(`.marker-${item.id}`).classList.add('marker-active')
+        }, 900)
       },
 
       getList (isSearch) {
@@ -114,6 +121,7 @@
             onInit(options) {
               this.content = options.content;
               this.position = options.position;
+              this.markersId = options.markersId
               this.customClass = options.customClass
             };
 
@@ -125,6 +133,9 @@
             createDOM() {
               let dom = document.createElement('div');
               dom.classList.add(this.customClass || 'marker');
+              if (this.markersId) {
+                dom.classList.add(this.markersId);
+              }
               dom.innerText = this.content;
 
               // 监听点击事件，实现zoomOnClick
@@ -164,7 +175,7 @@
               properties: {...e}
             })) || [],
             zoomOnClick: true,
-            maxZoom: 18
+            maxZoom: 20
           })
           this.setCenter(points.map(e => {
             return new TMap.LatLng(e.lat, e.lng)
@@ -196,7 +207,7 @@
               } else {
                 //点标记样式
                 let {content, id} = item.geometries?.[0] || {},
-                    overlay = new ClusterBubble({map, position: item.center, content})
+                    overlay = new ClusterBubble({map, position: item.center, content, markersId: `marker-${id}`})
                 overlay.on('click', () => {
                   uni.navigateTo({
                     url: `../AppMerchantManage/detail?id=${id}`
@@ -367,6 +378,7 @@
       width: fit-content;
       height: 56px;
       border-radius: 52px;
+      z-index: 1;
       transform: translate(-50%, -50%);
       display: flex;
       align-items: center;
@@ -383,6 +395,24 @@
         border: 12px solid transparent;
         border-top-color: #558BFE;
       }
+
+      &.marker-active {
+        z-index: 11;
+        background: red;
+
+        &:before {
+          content: " ";
+          display: block;
+          position: absolute;
+          bottom: 0;
+          left: 50%;
+          width: 0;
+          height: 0;
+          transform: translate(-50%, 100%);
+          border: 12px solid transparent;
+          border-top-color: red;
+        }
+      }
     }
 
     * {