uniapp实现地图点聚合

点聚合的最重要的一个地方是在 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.组装数据之后，并赋值给地图上的markerthis.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, // 聚合簇idmarkerIds // 已经聚合了的标记点id数组} = itemreturn {...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})})}
}