diff --git a/src/project/xicheng/AppMerchantMap/AppMerchantMap.vue b/src/project/xicheng/AppMerchantMap/AppMerchantMap.vue index 6581f829..87b31715 100644 --- a/src/project/xicheng/AppMerchantMap/AppMerchantMap.vue +++ b/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; + } + } } * {