小程序地图组件不能隐藏多边形、圆形覆盖物?
小程序地图清空polygon、polyline数据之后,重新setData也不会隐藏覆盖物
wxml代码
<map id="map" scale="15" show-location="true" markers="{{markers}}" circles="{{circles}}" polygons="{{polygons}}"
style="width: 100%; height: 100%" bindregionchange="mapChange">
</map>
js
data:{
markers:[{
"id": 346189,
"latitude": 28.204634908858026,
"longitude": 112.99551174014448,
"iconPath": "../../image/images/default.png",
"width": 0,
"height": 0,
"callout": {
"content": "0805新增工地看看",
"color": "#28373B",
"display": "ALWAYS",
"textAlign": "center",
"bgColor": "transparent",
"anchorY": 10
}
}],
polygons:[{
"points": [
{
"longitude": 112.868618,
"latitude": 28.289189
},
{
"longitude": 112.86188,
"latitude": 28.291985
},
{
"longitude": 112.867502,
"latitude": 28.295613
},
{
"longitude": 112.875312,
"latitude": 28.293345
},
{
"longitude": 112.875355,
"latitude": 28.293232
},
{
"longitude": 112.875355,
"latitude": 28.293194
}
],
"fillColor": "#FAC3251A",
"strokeColor": "#E32121FF",
"strokeWidth": 2
},
],
circles:[ {
"latitude": "28.194935",
"longitude": "112.925454",
"fillColor": "#FAC3251A",
"color": "#E32121FF",
"radius": 80,
"strokeWidth": 1
},
]
},
// 地图事件
mapChange({
causedBy,
detail,
type
}) {
if (type == 'end' && causedBy == 'scale') ) {
this.handleScaleChange(detail.scale)
}
},
handleScaleChange(scale) {
let {
markers,
circles,
polygons
} = this.data
if (scale <= 14.9) {
// 地图比例小于等于14.9,隐藏markers
markers.forEach(item => {
if (item.callout) {
item.callout.display = "BYCLICK"
}
})
} else {
// 地图比例小于等于14.9,显示markers
markers.forEach(item => {
if (item.callout) {
item.callout.display = "ALWAYS"
}
})
}
// 当缩放比例<=14时,展示电子围栏
if (scale >= 14) {
if (!circles.length) {
circles = graphicalData.circles
}
if (!polygons.length) {
polygons = graphicalData.polygons
}
} else {
circles = []
polygons = []
}
this.setData({
circles,
polygons,
markers
})
}