uniapp中map组件中聚合点样式怎么修改，我想修改聚合点聚合之后的样式，但是没有在地图组件上找到可以提供修改聚合之后的样式属性
1***@qq.com
- 发布：2022-03-02 13:46
- 更新：2022-04-11 17:09
- 阅读：2274
我的是nvue页面，以下是由官方示例修改而来
const img = '/static/logo.png';
export default {
data() {
return {
latitude: 23.099994,
longitude: 113.324520,
}
},
onReady() {
this._mapContext = uni.createMapContext("map", this);
// 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})
this._mapContext.initMarkerCluster({
enableDefaultStyle: false, // 是否使用默认聚合样式
zoomOnClick: true,
gridSize: 60,
complete(res) {
console.log('initMarkerCluster', res)
}
});
this._mapContext.on("markerClusterCreate", (clusters) => {
console.log("markerClusterCreate", clusters);
this.updateClusters(clusters)
});
this.addMarkers();
},
methods: {
updateClusters(clu){
let clusterMarkers = []
clu.forEach((cluster, index) => {
const {
center, // 聚合点的经纬度数组
clusterId, // 聚合簇id
markerIds // 已经聚合了的标记点id数组
} = cluster
let clusterObj = {
clusterId, //必须
...center,
width: 50,
height: 50,
iconPath: `../../static/icon/location_bg.png`, // 如果label不能满足需求，可用图片
joinCluster: true, // 注意：不加此项 自定义样式不显示，
label: { // 定制聚合簇样式
content: markerIds.length + '',
fontSize: 16,
color: '#fff',
width: 50,
height: 50,
bgColor: 'transparent',
borderRadius: 25,
textAlign: 'center',
anchorX: -25,
anchorY: -50,
}
}
clusterMarkers.push(clusterObj)
})
console.log(clusterMarkers)
// 添加聚合簇
this._mapContext .addMarkers({
markers: clusterMarkers,
clear: false, //是否先清空地图上所有的marker
})
},
addMarkers() {
const marker = {
id: 1,
iconPath: img,
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._mapContext.addMarkers({
markers,
clear: false,
complete(res) {
console.log('addMarkers', res)
}
})
})
}
}
}
1***@qq.com (作者)
2022-04-11 18:08
1***@qq.com (作者)
我按照你的试了一下，自定义样式改了背景颜色和iconPath图片，然后出现的聚合点样式还不是我修改后的样式，也是nvue页面，真机运行测试（苹果系统）
2022-04-11 18:10
x***@163.com
回复 1***@qq.com: 安卓可以，但要在聚合的marker里也加上joinCluster: true，不然也不生效。刚试了下ios确实不行，再看看怎么搞吧，hbuilderx是最新版
2022-04-11 20:41
1***@qq.com (作者)
回复 x***@163.com: 我也是最新版本，但是ios系统上修改自定义样式，就是不生效，就很头疼
2022-04-12 08:45
挽风入耳
为啥我生效的是label 而不是外面的圈呢 我凑 -_-
2022-08-17 17:53
while
回复 1***@qq.com: 你们使用这个不会一直触发markerClusterCreate事件吗，我怎么一直在闪
2024-03-19 17:15