diff --git a/project/pengliuyang/apps/AppCommunityResource/components/resourceMap.vue b/project/pengliuyang/apps/AppCommunityResource/components/resourceMap.vue
index 2cc90914..139f6199 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: {
@@ -117,8 +118,8 @@ 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 {
@@ -460,4 +480,69 @@ export default {
margin-right: 8px;
}
}
+::v-deep .polymeric {
+ display: flex;
+ position: relative;
+ align-items: center;
+ justify-content: center;
+ width: 62px;
+ height: 62px;
+ border-radius: 50%;
+ cursor: pointer;
+ user-select: none;
+
+ &.polymeric-active {
+ .polymeric-container {
+ background: #F46159;
+ }
+
+ &::after {
+ background-color: #F46159;
+ }
+ }
+
+ &::after {
+ // position: absolute;
+ // z-index: -1;
+ // width: 62px;
+ // height: 62px;
+ // border-radius: 50%;
+ // -webkit-animation: warn 1s ease-out 0s infinite;
+ // animation: warn 1s ease-out 0s infinite;
+ // background-color: rgba(15, 143, 100, 1);
+ // transform: translate(-50%, -50%);
+ // content: " ";
+ }
+
+ .polymeric-container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ width: 62px;
+ height: 62px;
+ border-radius: 50%;
+ background: rgba(15, 143, 100, 1);
+
+ p {
+ text-align: center;
+ width: 58px;
+ color: #fff;
+ font-size: 18px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ p:first-child{
+ font-size: 14px;
+ }
+
+ h2 {
+ color: #fff;
+ font-weight: normal;
+ font-size: 12px;
+ }
+ }
+}