注：

1.默认的聚合点可以点击自动展示子级点位，但是自定义的聚合点在ios上无法触发markerClusterClick的监听，至今未解决，不知啥原因

2.ios和安卓展示的点位样式还有有差别

源码附上

<template>
	<view class="marker-map">
		<map id="mapId" style="width: 100%; height:1342rpx ;" :latitude="latitude" :longitude="longitude"
			show-location show-scale :scale="zoom" @regionchange="regionchange" @updated="update" @callouttap='callouttap'>
		</map>
		<view class="layer flex-column align-end">
			<view class="cur-location justify-center align-center" @click="backCenter">
				<image :src="imgConf.position" mode="" style="width:60%;height: 60%;"></image>
			</view>
			<view class="list">
				<u-transition :show="showMarkerListPop" mode="fade-up">
					<mapMarkerList @onclose="showMarkerListPop=false" />
				</u-transition>
			</view>
		</view>
	</view>
</template>

<script>
	import mapMarkerList from './components/mapMarkerList.vue'
	import imgConf from '@/utils/imgConf.js'
	export default {
		components: {
			mapMarkerList
		},
		data() {
			return {
				imgConf,
				longitude: 104.04311,
				latitude: 30.64242,
				markers: [], // 使用 marker点击事件 需要填写id
				fixedHeight: 60,
				zoom: 16,
				showMarkerListPop: false
			}
		},
		created() {
			this.mapContext = uni.createMapContext("mapId", this);


			console.log("this.mapContext", this.mapContext);
			// 使用默认聚合效果时可注释下一句
			this.bindEvent()
			this.getDotList();
		},

		methods: {
			bindEvent() {
				this.mapContext.initMarkerCluster({
					enableDefaultStyle: false,
					zoomOnClick: true,
					gridSize: 100,
					complete(res) {
						console.log('initMarkerCluster', res)
					}
				});

				// enableDefaultStyle 为 true 时不会触发该事件
				this.mapContext.on('markerClusterCreate', res => {
					const clusters = res.clusters
					const markers = clusters.map(cluster => {
						const {
							center,
							clusterId,
							markerIds
						} = cluster
						return {
							...center,
							width: 1,
							height: 1,
							clusterId, // 必须
							iconPath: '',
							label: {
								content: '盛世年华' + "(" + "2" + "套)" + '\n' + '12' + '元起',
								color: "#ffffff",
								fontSize: 11,
								borderRadius: 8,
								bgColor: "#0090FF",
								padding: 10,
								textAlign: 'center',
								anchorX: 0,
								anchorY: -56,
							}
							// callout: {
							// 	content: '盛世年华' + "(" + "2" + "套)" + '\n' + '12' + '元起',
							// 	color: "#ffffff",
							// 	fontSize: 11,
							// 	borderRadius: 8,
							// 	bgColor: "#0090FF",
							// 	padding: 10,
							// 	textAlign: 'center',
							// 	display: 'ALWAYS',
							// },
						}
					})
					this.mapContext.addMarkers({
						markers,
						clear: false,
						complete(res) {
							console.log('clusterCreate addMarkers', res)
						}
					})
				})

				this.mapContext.on("markerClusterClick", (ClusterInfo) => {
					console.log("点击聚合点", ClusterInfo); //[id1,id2]
				});
			},
			// 获取所有点位/
			async getDotList(params) {
				// const res = await getDot(params)
				const resPosition = [{
						longitude: 113.324520,
						latitude: 23.099994,
						title: '盛世年华1',
						num: 1,
						price: 35500
					},
					{
						longitude: 102.04320,
						latitude: 31.64242,
						title: '盛世年华2',
						num: 1,
						price: 35500
					},
					{
						longitude: 102.04313,
						latitude: 30.64242,
						title: '盛世年华3',
						num: 1,
						price: 15500
					},
					{
						longitude: 113.326520,
						latitude: 31.64242,
						title: '盛世年华4',
						num: 3,
						price: 25500
					},
				]
				const markers = []
				resPosition.forEach((p, i) => {
					markers.push(
						Object.assign({}, {
							id: i + 1,
							iconPath: '',
							joinCluster: true,
							width: 2,
							height: 2,
							callout: {
								content: p.title + "(" + p.num + "套)" + '\n' + p.price + '元起',
								color: "#ffffff",
								fontSize: 11,
								borderRadius: 8,
								bgColor: "#0090FF",
								padding: 10,
								textAlign: 'center',
								display: 'ALWAYS',
							},
						}, p)
					)
				})
				this.markers = JSON.parse(JSON.stringify(markers))
				this.mapContext.addMarkers({
					markers: this.markers,
					clear: false,
					complete(res) {
						console.log('addMarkers', res)
					}
				})
				// .map((item, index) => {
				// 	if (item.lnglat === '') {
				// 		return undefined
				// 	}
				// 	var location = item.x.split(",");
				// 	let iconPath = ''

				// 	let label = item.name.length > 20 ? item.name.substr(0, 18) + '...' : item.name;
				// 	label = label.length > 10 ? label.substr(0, 10) + '\n' + label.substr(10) : label;
				// 	return {
				// 		id: index,
				// 		longitude: Number(location[0]),
				// 		latitude: Number(location[1]),
				// 		iconPath,
				// 		joinCluster: this.zoom > 18 ? false : true,
				// 		width: 50,
				// 		height: 60,
				// 		name: item.name,
				// 		label: {
				// 			content: label,
				// 			anchorX: 20,
				// 			anchorY: -45,
				// 			color: '#333',
				// 			fontSize: 14
				// 		}
				// 	}
				// }).filter(i => i !== undefined)
				console.log('markers', this.markers)
				if (this.markers.length === 0) {
					uni.showToast({
						title: '暂无相关点位信息',
						icon: "none"
					})
					this.longitude = 92.066757
					this.latitude = 31.473608
					this.zoom = 16
					return
				}
				// })
			},
			// 点击标记点
			callouttap(e) {
				this.showMarkerListPop = true
				// 根据markerid查找
				console.log('点击标记点E', e) //e.markerId
			},

			regionchange() {
				// this.mapContext.getScale({
				// 	success: (res) => {
				// 		this.zoom = res.scale
				// 	}
				// })
			},
			update() {

				console.log('渲染更新完成') //e.markerId
			},
			// 定位到当前位置
			backCenter() {
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						if (res.longitude && res.latitude) {
							this.latitude = Number(res.latitude)
							this.longitude = Number(res.longitude)
							this.zoom = 16.01 // 必须要有层级的变化，下面的方法才能生效
							this.mapContext.moveToLocation({
								longitude: this.longitude,
								latitude: this.latitude,
								success: (res) => {
									this.zoom = 16.03
								},
								fail: (info) => {
									console.log(info)
								}
							})
						} else {
							uni.showToast({
								title: '无法获取当前定位'
							})
						}
					},
					fail(err) {
						uni.showToast({
							title: '无法获取当前定位'
						})
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.marker-map {
		.layer {
			position: fixed;
			z-index: 999;
			width: 100%;
			right: 0;
			bottom: 0;
		}

		.cur-location {
			width: 86rpx;
			height: 86rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 8rpx 1rpx rgba(0, 144, 255, 0.15);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-right: 30rpx;
			margin-bottom: 50rpx;
		}

		.list {
			width: 100%;
			height: 100%;
		}
	}
</style>