map的点的聚合

前言： uniapp兼容了各端，但是在只用map的时候，需要进行点的标记和聚合，发现写的不是很详细，这里详细介绍一下点的聚合

uniapp的地图讲解 - uni-app官网

实现的效果如下：

 首先是uniapp的官网关于点聚合，只讲解了一个clusterId,，并没有具体的使用方法，在社区去看

但是微信小程序是实现了点的聚合的

微信小程序 - map | 微信开放文档

 

 大家可以先自行看微信小程序的讲解，在看下面的代码

uniapp的map的配置是有限的，没有高德地图api实现的丰富，但是基本的功能还是可以实现

下面是微信小程序实现代码

数据

markers: [{
						id: 0,
						joinCluster: true,
						latitude: 39.891504,
						longitude: 116.378088,
						width: 32,
						height: 40,
						iconPath: '../../static/img/post.png',
					},
					{
						id: 1,
						// clusterId: 1,
						joinCluster: true,
						latitude: 39.899932,
						longitude: 116.384359,
						width: 32,
						height: 40,
						iconPath: '../../static/img/post.png',
					},
					{
						id: 3,
						joinCluster: true,
						latitude: 39.90651,
						longitude: 116.372105,
						width: 32,
						height: 40,
						iconPath: '../../static/img/post.png',
				
					},
					{
						id: 4,
						joinCluster: true,
						latitude: 39.909074,
						longitude: 116.397703,
						width: 32,
						height: 40,
						iconPath: '../../static/img/post.png',
					}
				]

实现的点聚合

	mounted() {
			// #ifdef MP-WEIXIN
			this.mapCtx = wx.createMapContext('map', this);
			this.openAggator();
			// #endif
		},
		methods: {
			// 点聚合
			openAggator() {
				this.mapCtx.initMarkerCluster({
					enableDefaultStyle: false,
					zoomOnClick: true,
					gridSize: 60,
					complete(res) {
						console.log('initMarkerCluster', res)
					}
				})

				this.mapCtx.on('markerClusterCreate', res => {
					console.log('clusterCreate', res)
					const clusters = res.clusters
					const markers = clusters.map(cluster => {
						const {
							center,
							clusterId,
							markerIds
						} = cluster
						return {
							...center,
							width: 0,
							height: 0,
							clusterId, // 必须
							label: {
								content: markerIds.length + '',
								fontSize: 12,
								width: 30,
								color: 'white',
								height: 30,
								bgColor: '#00A3FA',
								borderRadius: 15,
								textAlign: 'center',
								anchorX: 0,
								anchorY: -30,
							}
						}
					})
					this.mapCtx.addMarkers({
						markers,
						clear: false,
						complete(res) {
							console.log('clusterCreate addMarkers', res)
						}
					})
				})
			},
}

希望可以帮到大家，欢迎一起讨论

写在最后

静态数据直接渲染在手机浏览起来还是很顺畅，但是当变成动态数据之后，会出现，闪烁微信小程序自带的默认样式，有时候点的个数还会有一定问题，点的label,聚合的点在分开后label会不在出现了

微信社区 - 有人提出了这个问题initMarkerClusterCreate自定义点聚合样式时，会闪出默认样式 再渲染自定义样式？ | 微信开放社区

 

 官方解释，8.0.7版本已经解决，但是现在的真机还是偶尔会出现这样子的问题