<template>
<view class="content">
<map id="map" class="map" :show-location="true" :latitude="latitude" :longitude="longitude"></map>
</view>
</template>
<script>
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", (e) => {
debugger
let clusterMarkers = []
// const clusters = e.clusters // 新产生的聚合簇
const clusters = e // 新产生的聚合簇
console.log(clusters)
clusters.forEach((cluster,index) => {
const {
center, // 聚合点的经纬度数组
clusterId, // 聚合簇id
markerIds // 已经聚合了的标记点id数组
} = cluster
debugger
let clusterObj = {clusterId,
width: 50,
height: 50,
iconPath: '',
label: {// 定制聚合簇样式
fontSize: 16,
color: '#fff',
width: 50,
height: 50,
bgColor: '#22ac38',
borderRadius: 25,
textAlign: 'center',
anchorX: -10,
anchorY: -35,
}
}
clusterMarkers.push(clusterObj)
})
// 添加聚合簇
this._mapContext.addMarkers({
markers:clusterMarkers,
clear: false, //是否先清空地图上所有的marker
})
console.log(clusterMarkers)
// console.log("markerClusterCreate", e);
});
this.addMarkers();
},
methods: {
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)
}
})
})
}
}
}
</script>
<style>
.content {
flex: 1;
}
.map {
flex: 1;
}
</style>
1***@qq.com
- 发布：2022-03-31 17:15
- 更新：2022-07-19 09:53
- 阅读：1989
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： 正式
HBuilderX版本号： 3.3.13
手机系统： Android
手机系统版本号： Android 10
手机厂商： 华为
手机机型： note9
页面类型： nvue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
在安卓手机上打开地图，聚合点样式会发生改变
在安卓手机上打开地图，聚合点样式会发生改变
预期结果：
聚合点样式发生改变
聚合点样式发生改变
实际结果：
样式没变
样式没变
bug描述：
uniapp中使用map组件自定义聚合点样式，在APP端nvue页面样式失效
聚合时也加上joinCluster: true, 安卓自定义样式可以生效，但ios不生效 [挠头]
const {
center, // 聚合点的经纬度数组
clusterId, // 聚合簇id
markerIds // 已经聚合了的标记点id数组
} = cluster
let clusterObj = {clusterId,
width: 50,
height: 50,
iconPath: '',
** joinCluster: true,**
label: {// 定制聚合簇样式
fontSize: 16,
color: '#fff',
width: 50,
height: 50,
bgColor: '#22ac38',
borderRadius: 25,
textAlign: 'center',
anchorX: -10,
anchorY: -35,
}
} -
发现ios是由于this.mapctx.on("markerClusterCreate", (e) => {}) 事件不触发导致的，怎搞
this.mapctx.initMarkerCluster({
enableDefaultStyle: false,
zoomOnClick: true,
gridSize: 60,
success: (res) => {
console.log('initMarkerCluster', res)
}
});
this.mapctx.on("markerClusterCreate", (clusters) => {
console.log("markerClusterCreate", clusters);
if (clusters) {
this.updateClusters(clusters)
}
});2022-04-11 22:08
-
-
回复 1***@qq.com: 一样的代码，安卓没事，ios不触发markerClusterCreate事件，换成别的比如markerClusterClick事件就会触发 [挠头]
2022-04-12 09:05
-
-
-
-
1***@qq.com (作者)
已贴，我已经把底色换成绿色了，但是没有变化
2022-04-01 10:27