<template>
<view>
<map id="mapId" ref="mapId" class="map" :longitude="longitude" :latitude="latitude" @markertap="markertap" @tap="tapMap"></map>
<view class="btn-area service">
<button @click="removeMarkers">移除参与聚合点的marker</button>
<button @click="addMarkers">添加聚合点marker</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
latitude: 23.099994,
longitude: 113.324520,
}
},
onLoad() {
this.mapCtx = uni.createMapContext('mapId', this);
this.mapCtx.on('markerClusterClick', res=> {
console.log('markerClusterClick', res)
})
this.bindEvent()
},
methods: {
bindEvent() {
// 聚合点进行初始化配置
this.mapCtx.initMarkerCluster({
enableDefaultStyle: false,
zoomOnClick: true,
gridSize: 60,
complete(res) {
console.log('initMarkerCluster', res)
}
})
// enableDefaultStyle 为 true 时不会触发改事件
this.mapCtx.on('markerClusterCreate', res => {
console.log('clusterCreate', res)
const clusters = res.clusters
const markers = clusters.map(cluster => {
const {
center,
clusterId,
markerIds
} = cluster
return {
...center,
width: 0,
height: 0,
clusterId, // 必须
label: {
content: markerIds.length + '',
fontSize: 20,
width: 60,
height: 60,
bgColor: '#00ff00',
borderRadius: 30,
textAlign: 'center',
anchorX: 0,
anchorY: -30,
}
}
})
this.mapCtx.addMarkers({
markers,
clear: false,
complete(res) {
console.log('clusterCreate addMarkers', res)
}
})
})
},
addMarkers() {
const marker = {
id: 1,
iconPath: '/static/images/ico_map_zd_s.png',
width: 50,
height: 50,
joinCluster: true, // 指定了该参数才会参与聚合
label:{
width: 50,
height: 30,
borderWidth: 1,
borderRadius: 10,
bgColor: '#ffffff'
}
}
const positions = [
{
latitude: 23.099994,
longitude: 113.324520,
}, {
latitude: 23.099994,
longitude: 113.322520,
}, {
latitude: 23.099994,
longitude: 113.326520,
}, {
latitude: 23.096994,
longitude: 113.329520,
}
]
const markers = []
positions.forEach((p, i) => {
const newMarker = Object.assign(marker, p)
newMarker.id = i + 1
newMarker.label.content = `label ${i + 1}`
markers.push(newMarker)
this.mapCtx.addMarkers({
markers,
clear: false,
complete(res) {
console.log('addMarkers', res)
}
})
})
},
removeMarkers() {
this.mapCtx.addMarkers({
clear: true,
markers: []
})
},
onMarkerTap(e) {
console.log('@@ markertap', e)
},
onCalloutTap(e) {
console.log('@@ onCalloutTap', e)
},
onLabelTap(e) {
console.log('@@ labletap', e)
}
}
}
</script>
<style>
.map {
width: 750rpx;
height: 300px;
}
.btn-area {
margin: 10px;
display: flex;
flex-wrap: wrap;
border: 1px solid #ccc;
}
button {
display: inline-block;
margin: 10px 5px;
}
</style>
- 发布:2021-10-09 17:09
- 更新:2021-12-15 15:27
- 阅读:1240
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win 10
HBuilderX类型: 正式
HBuilderX版本号: 3.2.9
手机系统: Android
手机系统版本号: Android 11
手机厂商: 小米
手机机型: 小米9
页面类型: nvue
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
点击添加聚合效果后 marks 清除无效
点击添加聚合效果后 marks 清除无效
预期结果:
应该所有 marks 清空
应该所有 marks 清空
实际结果:
点击添加聚合效果后 marks 清除无效
点击添加聚合效果后 marks 清除无效
bug描述:
Android端 nvue Map中markers 添加了点聚合后
addMarkers() {
const marker = {
id: 1,
iconPath: '/static/images/ico_map_zd_s.png',
width: 50,
height: 50,
joinCluster: true, // 指定了该参数才会参与聚合
label:{
width: 50,
height: 30,
borderWidth: 1,
borderRadius: 10,
bgColor: '#ffffff'
}
}
const positions = [
{
latitude: 23.099994,
longitude: 113.324520,
}, {
latitude: 23.099994,
longitude: 113.322520,
}, {
latitude: 23.099994,
longitude: 113.326520,
}, {
latitude: 23.096994,
longitude: 113.329520,
}
]
const markers = []
positions.forEach((p, i) => {
const newMarker = Object.assign(marker, p)
newMarker.id = i + 1
newMarker.label.content = `label ${i + 1}`
markers.push(newMarker)
this.mapCtx.addMarkers({
markers,
clear: false,
complete(res) {
console.log('addMarkers', res)
}
})
})
},
removeMarkers() {
this.mapCtx.addMarkers({
clear: true,
markers: []
})
},
无效,无法清除 点聚合数据 ,