点聚合的最重要的一个地方是在 markers 中添加 joinCluster = true 这个重要的属性,否则将无法开启点聚合功能。
其实在uniapp的官方文档里体现的不是那么清楚,但是在小程序文档提示的就相当清楚。
实现效果如下:
重点:需要编译在小程序开发工具中使用 “ 真机预览 ” 才可展示如图所示效果
1、使用地图组件
<template>
<map id="alarm_map" :markers="allMarkers" :show-location="true" :latitude="latitude" scale="18"></map>
</template>
2、页面中逻辑
import { getApi } from "@/utils/common.js"
export default {
data() {
return {
latitude: 29.519418, // 纬度
longitude: 106.687094, // 经度
allMarkers: [] // 标记点
}
},
onReady() {
// 1.页面准备好后,获取到map组件的执行上下文。注意:这里是取的map的id属性
this.mapContext = uni.createMapContext("alarm_map", this);
// 2.请求数据
this.getallStations()
},
methods: {
getallStations() {
uni.showLoading()
let obj = {
id: id,
stationQuery: query
}
getApi(obj).then(res => {
uni.hideLoading();
if (res.code == 0) {
if (!Array.isArray(res.data) || res.data.length <= 0) return
// 拿到请求数据后,把数据传给点聚合功能;
this.setMarkersAndCluster(res.data) // 3、调用聚合功能
}
})
},
// 聚合功能
setMarkersAndCluster(markerList) {
// 1.组装数据之后,并赋值给地图上的marker
this.allMarkers = Array.from(markerList).map((item, i) => {
return {
...item,
width: 41,
height: 41,
iconPath: 'https://cdn.uviewui.com/uview/album/1.jpg',
joinCluster: true, // 这个属性很重要,必须要
callout: { // 自定义标记点上方的气泡窗口
content: '***聚合1',
display: 'ALWAYS', // 'BYCLICK':点击显示; 'ALWAYS':常显
padding: 5,
textAlign: 'center',
color: '#C2874D',
borderRadius: 4
},
label: { // 为标记点旁边增加标签
content: '你好,marker',
borderColor: '#ff0000',
bgColor: '#ffffff'## 标题
},
}
});
// 2.初始化点聚合的配置,未调用时采用默认配置
this.mapContext.initMarkerCluster({
enableDefaultStyle: false, // 是否启用默认的聚合样式(是否用自定义图标)
zoomOnClick: true,
gridSize: 60,
complete(res) {
console.log('initMarkerCluster', res)
}
});
// 3.发生聚合时,给聚合点设置marker标签
this.mapContext.on('markerClusterCreate', res => {
const clusters = res.clusters // 新产生的聚合簇
const zhou = clusters.map(item=> {
const {
center, // 聚合点的经纬度数组
clusterId, // 聚合簇id
markerIds // 已经聚合了的标记点id数组
} = item
return {
...center,
width: 50,
height: 50,
clusterId, // 必须有
iconPath: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker_blue.png',
borderRadius: 8,
joinCluster: true,
label: { // 定制聚合点样式
content: markerIds.length + '',
fontSize: 14,
width: 18,
height: 18,
color: '#ffffff',
bgColor: '#C2874D',
borderRadius: 6,
textAlign: 'center',
anchorX: 25,
anchorY: -60,
}
}
})
// 4. 添加聚合簇标签
this.mapContext.addMarkers({
markers: zhou,
clear: false, //是否先清空地图上所有的marker
})
})
}
}