kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

资源地图

Browse Source
This commit is contained in:
liuye
2022-10-09 10:21:00 +08:00
parent edddb02dfe
commit 962ea61fa5
1 changed files with 31 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
project/pengliuyang/apps/AppCommunityResource/components/resourceMap.vue
View File

@@ -59,7 +59,8 @@ export default {
fireIconActive: require('./img/fire-icon-active.png'), fireIconActive: require('./img/fire-icon-active.png'),
isShowInfo: false, isShowInfo: false,
resourceList: [], resourceList: [],
chooseResourceId: '' chooseResourceId: '',
MarkerClusterer: null
} }
}, },
computed: { computed: {
@@ -118,7 +119,7 @@ export default {
renderMarker(context) { renderMarker(context) {
const resourceId = context.data[0].id const resourceId = context.data[0].id
let el = `<img src="${resourceId === this.chooseResourceId ? this.fireIconActive : this.fireIcon}" style="${resourceId === this.chooseResourceId ? 'width:40px;height:40px;' : 'width:28px;height:28px;'}" id="resourceId-${resourceId}" class="mark-icon" />` let el = `<img src="${resourceId === this.chooseResourceId ? this.fireIconActive : this.fireIcon}" style="${resourceId === this.chooseResourceId ? 'width:50px;height:50px;' : 'width:38px;height:38px;'}" id="resourceId-${resourceId}" class="mark-icon" />`
context.marker.setContent(el); context.marker.setContent(el);
context.marker.setAnchor("center") context.marker.setAnchor("center")
@@ -130,20 +131,26 @@ export default {
this.getResourceInfo(e.target.id) this.getResourceInfo(e.target.id)
context.marker.setContent(el); context.marker.setContent(el);
document.querySelectorAll('.mark-icon').forEach(el => { document.querySelectorAll('.mark-icon').forEach(el => {
el.style['width'] = '28px' el.style['width'] = '38px'
el.style['height'] = '28px' el.style['height'] = '38px'
el.src = this.fireIcon el.src = this.fireIcon
}) })
document.querySelector(`#buildId-${e.target.id}`).style['width'] = '40px' document.querySelector(`#resourceId-${e.target.id}`).style['width'] = '50px'
document.querySelector(`#buildId-${e.target.id}`).style['height'] = '40px' document.querySelector(`#resourceId-${e.target.id}`).style['height'] = '50px'
document.querySelector(`#buildId-${e.target.id}`).src = this.fireIconActive document.querySelector(`#resourceId-${e.target.id}`).src = this.fireIconActive
}) })
}, },
addMakert(points) { addMakert(points) {
let {mapLib: AMap} = this 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, gridSize: 60,
maxZoom: 15, maxZoom: 15,
clusterByZoomChange: false, clusterByZoomChange: false,
@@ -183,6 +190,7 @@ export default {
}, },
getResourceListInit() { getResourceListInit() {
this.isShowInfo = false this.isShowInfo = false
this.getResourceList() this.getResourceList()
}, },
getResourceList() { getResourceList() {
@@ -330,9 +338,7 @@ export default {
span { span {
display: inline-block; display: inline-block;
width: 64px;
height: 22px; height: 22px;
text-align: center;
line-height: 22px; line-height: 22px;
background: #E8EFFF; background: #E8EFFF;
border-radius: 2px; border-radius: 2px;
@@ -341,6 +347,7 @@ export default {
color: #26F; color: #26F;
margin-left: 8px; margin-left: 8px;
font-weight: 400; font-weight: 400;
padding: 0 4px;
} }
} }
@@ -353,6 +360,19 @@ export default {
color: #333; 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 { .map-area {