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.组装数据之后，并赋值给地图上的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
		})
    })
  }
}