diff --git a/project/pengliuyang/apps/AppCommunityResource/components/resourceMap.vue b/project/pengliuyang/apps/AppCommunityResource/components/resourceMap.vue index bda173a7..8d39ea33 100644 --- a/project/pengliuyang/apps/AppCommunityResource/components/resourceMap.vue +++ b/project/pengliuyang/apps/AppCommunityResource/components/resourceMap.vue @@ -59,7 +59,8 @@ export default { fireIconActive: require('./img/fire-icon-active.png'), isShowInfo: false, resourceList: [], - chooseResourceId: '' + chooseResourceId: '', + MarkerClusterer: null } }, computed: { @@ -118,7 +119,7 @@ export default { renderMarker(context) { const resourceId = context.data[0].id - let el = `` + let el = `` context.marker.setContent(el); context.marker.setAnchor("center") @@ -130,20 +131,26 @@ export default { this.getResourceInfo(e.target.id) context.marker.setContent(el); document.querySelectorAll('.mark-icon').forEach(el => { - el.style['width'] = '28px' - el.style['height'] = '28px' + el.style['width'] = '38px' + el.style['height'] = '38px' el.src = this.fireIcon }) - document.querySelector(`#buildId-${e.target.id}`).style['width'] = '40px' - document.querySelector(`#buildId-${e.target.id}`).style['height'] = '40px' - document.querySelector(`#buildId-${e.target.id}`).src = this.fireIconActive - + document.querySelector(`#resourceId-${e.target.id}`).style['width'] = '50px' + document.querySelector(`#resourceId-${e.target.id}`).style['height'] = '50px' + document.querySelector(`#resourceId-${e.target.id}`).src = this.fireIconActive }) }, addMakert(points) { let {mapLib: AMap} = this - new AMap.MarkerClusterer(this.map, points, { + + if (this.MarkerClusterer) { + this.MarkerClusterer.setData(points) + + return false + } + + this.MarkerClusterer = new AMap.MarkerClusterer(this.map, points, { gridSize: 60, maxZoom: 15, clusterByZoomChange: false, @@ -183,6 +190,7 @@ export default { }, getResourceListInit() { this.isShowInfo = false + this.getResourceList() }, getResourceList() { @@ -330,9 +338,7 @@ export default { span { display: inline-block; - width: 64px; height: 22px; - text-align: center; line-height: 22px; background: #E8EFFF; border-radius: 2px; @@ -341,6 +347,7 @@ export default { color: #26F; margin-left: 8px; font-weight: 400; + padding: 0 4px; } } @@ -353,6 +360,19 @@ export default { color: #333; } } + // .community-info-content { + // position: relative; + // } + // .community-arrow { + // width: 0px; + // height: 0px; + // border-top: 8px solid #fff; + // border-left: 8px solid transparent; + // border-right: 8px solid transparent; + // position: absolute; + // left: calc(50% - 8px); + // bottom: -8px; + // } } .map-area {