diff --git a/src/apps/AppMonitoringObject/AppMonitoringObject.vue b/src/apps/AppMonitoringObject/AppMonitoringObject.vue index ce56950b..e78d4a05 100644 --- a/src/apps/AppMonitoringObject/AppMonitoringObject.vue +++ b/src/apps/AppMonitoringObject/AppMonitoringObject.vue @@ -112,6 +112,8 @@ export default { confirmTypeSelect(val) { this.status = val?.[0].value this.$nextTick(()=>{ + this.current = 1, + this.list = [] this.getList() }) }, @@ -153,7 +155,6 @@ export default { this.typelist = this.$dict.getDict('fpPrtpStatus').filter((e) => e.dictValue != 5) this.typelist.unshift({ dictName: '全部类型', dictValue: ''}) } - this.status = '' this.getListInit() diff --git a/src/project/xicheng/AppMerchantMap/AppMerchantMap.vue b/src/project/xicheng/AppMerchantMap/AppMerchantMap.vue index 13bf52e5..7837a999 100644 --- a/src/project/xicheng/AppMerchantMap/AppMerchantMap.vue +++ b/src/project/xicheng/AppMerchantMap/AppMerchantMap.vue @@ -32,8 +32,7 @@ polygons: [], labels: [], businessName: '', - ops: { - }, + ops: {}, markers: [], isShow: false, MarkerCluster: null, @@ -59,12 +58,15 @@ this.businessName = item.businessName this.isShow = false - this.map.easeTo({ - center: new this.lib.LatLng(item.lat, item.lng), - zoom: 17 - }, { - duration: 2000 - }) + this.map.setCenter(new this.lib.LatLng(item.lat, item.lng)) + this.map.setZoom(22) + + setTimeout(() => { + document.querySelectorAll('.marker').forEach(e => { + e.classList.remove('marker-active') + }) + document.querySelector(`.marker-${item.id}`).classList.add('marker-active') + }, 400) }, getList (isSearch) { @@ -115,6 +117,7 @@ onInit(options) { this.content = options.content; this.position = options.position; + this.markersId = options.markersId this.customClass = options.customClass }; @@ -126,6 +129,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 @@ -155,8 +161,6 @@ } } - // this.config.latlng && map.setCenter(this.config.latlng) - this.MarkerCluster = new TMap.MarkerCluster({ map, gridSize: 60, enableDefaultStyle: false, // 关闭默认样式 @@ -166,7 +170,8 @@ content: `${e.name}`, properties: {...e} })) || [], - zoomOnClick: true + zoomOnClick: true, + maxZoom: 18 }) this.setCenter(points.map(e => { return new TMap.LatLng(e.lat, e.lng) @@ -198,7 +203,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}` @@ -363,12 +368,14 @@ } ::v-deep.marker { + position: relative; color: #fff; background: #558BFE; padding: 0 32px; width: fit-content; height: 56px; border-radius: 52px; + z-index: 1; transform: translate(-50%, -50%); display: flex; align-items: center; @@ -385,6 +392,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; + } + } } * {