uniapp map 点聚合聚合点样式修改-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp map 点聚合聚合点样式修改。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

重点：此代码复制可直接运行，重要提示需要编译在小程序开发工具中使用“真机预览”才可展示如上图所示效果，一定“真机预览”哟！！！

项目需求聚合点的展示必须是图片的样式展示，不能使用默认样式。

图片展示（本来想弄视频太麻烦了）：

uniapp map 点聚合聚合点样式修改,uni-app,小程序

点聚合的最重要的一个地方是在markers中添加 joinCluster = true 这个重要的属性，否则将无法开启点聚合功能，这个在uniapp的官方文档里体现的不是那么清楚，但是在小程序文档提示的就相当清楚。

代码：

<template>
	<view class="base_body">
		<map :markers="markers"  max-scale="11.9" :scale="scale" id="map" style="width: 100%; height: 100%;" :latitude="latitude"
			:longitude="longitude">
		</map>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				map: '',
				scale: '8', // 缩放级别，取值范围为3-20
				latitude: 39.890, // 地图默认显示的维度
				longitude: 116.39752, // 地图默认显示的纬度
				markerClickList: [],
				markers: [],  // 标记点组
			}
		},
		onShow() {
			// 创建地图对象
			this.mapCtx = uni.createMapContext('map', this);
			this.openAggator()  // 如果使用聚合点默认样式 就可以不执行这句代码。
		},
		methods: {
			openAggator() {
                // 这里的赋值 到时候是‘请求接口’得来的。
				setTimeout(() => {   // 模拟异步请求接口（一进入页面才能看见聚合点的样式是图片，不然就是默认样式）
					this.markers = [{ // 标记点
						id: 1,
						latitude: 40.8909,
						longitude: 116.39751,
						width: 50,
						height: 50,
						title: "点击提示1",
						iconPath: 'https://cdn.uviewui.com/uview/album/1.jpg',
						joinCluster: true, // 是否参与点聚合
						callout: {
							content: '***的位置1',
							display: 'ALWAYS',
							padding: 5,
							textAlign: 'center',
							color: '#C2874D',
							borderRadius: 4
						}
					}, {
						id: 2,
						latitude: 40.10111,
						longitude: 116.39752,
						title: "点击提示2",
						width: 50,
						height: 50,
						iconPath: 'https://cdn.uviewui.com/uview/album/1.jpg',
						joinCluster: true,
						callout: {
							content: '***的位置2',
							display: 'ALWAYS',
							padding: 5,
							textAlign: 'center',
							color: '#C2874D',
							borderRadius: 4
						}
					}, {
						id: 3,
						latitude: 39.892,
						longitude: 116.39752,
						title: "点击提示3",
						width: 50,
						height: 50,
						iconPath: 'https://cdn.uviewui.com/uview/album/1.jpg',
						joinCluster: true,
						callout: {
							content: '***的位置3',
							display: 'ALWAYS',
							padding: 5,
							textAlign: 'center',
							color: '#C2874D',
							borderRadius: 4
						}
					}, {
						id: 4,
						latitude: 39.893,
						longitude: 116.39752,
						width: 50,
						height: 50,
						title: "点击提示4",
						iconPath: 'https://cdn.uviewui.com/uview/album/1.jpg',
						joinCluster: true,
						callout: {
							content: '***的位置4',
							display: 'ALWAYS',
							padding: 5,
							textAlign: 'center',
							color: '#C2874D',
							borderRadius: 4
						}
					}, ]
				}, 3000)
				console.log('监听地图事件');
				this.mapCtx.initMarkerCluster({ // 初始化点聚合的配置
					enableDefaultStyle: false, // 是否使用默认样式
					zoomOnClick: true,
					gridSize: 60,
				})
				// 新的聚合簇产生时触发
				this.mapCtx.on('markerClusterCreate', res => {
					console.log(res, '新的聚合簇产生时触发');
					const clusters = res.clusters // 新产生的聚合簇
					const markers = clusters.map(cluster => {
						const {
							center, // 聚合点的经纬度数组
							clusterId, // 聚合簇id
							markerIds // 已经聚合了的标记点id数组
						} = cluster
						
						// 聚合点图片显示聚合数组中的第1个
						let list = this.markers.find(item => (markerIds[0] == item.id))
						return {
							...center,
							width: 50,
							height: 50,
							clusterId, // 必须
							iconPath: list.iconPath,
							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,
							}
						}
					})
					// 添加聚合簇
					this.mapCtx.addMarkers({
						markers,
						clear: false, //是否先清空地图上所有的marker
					})
				})
				// 聚合点点击事件
				this.mapCtx.on('markerClusterClick', res => {
					console.log(res, '聚合簇的点击事件');
					const clusters = new Array(res.cluster) // 新产生的聚合簇
					clusters.map(cluster => {
						const {
							center, // 聚合点的经纬度数组
							clusterId, // 聚合簇id
							markerIds // 已经聚合了的标记点id数组
						} = cluster

						let list = []
						markerIds.forEach(item => {
							let newObj = this.markers.find(item1 => (item1.id == item))
							list.push(newObj)
						})
						this.markerClickList = list
					})
					// 获取当前地图的缩放级别
					let _this = this
					_this.mapCtx.getScale({
						success(res) {
							console.log(res.scale, '获取当前地图的缩放级别');
							// 业务需求，不能看见详细位置，这里配置“max-scale="11.9"”做了限制。 
							if (res.scale >= 11.9) {  
								_this.markersList = _this.markerClickList
								_this.campListShow = true
								console.log(_this.markerClickList, '无法分裂聚合点数组数据');
							}
						}
					})
				})
			},
		}
	}
</script>

<style>
	.base_body {
		width: 100%;
		height: 100%;
		position: absolute;
	}

	/* 水平，垂直居中 */
	.base_all_center {
		justify-content: center;
		align-items: center;
	}

	/* 垂直居中 */
	.base_center_vertical {
		display: flex;
		align-items: center;
	}

	/* 水平居中 */
	.base_center_horizontal {
		display: flex;
		justify-content: center;
	}

	/* 垂直布局 */
	.base_column {
		display: flex;
		flex-direction: column;
	}

	/* 横向布局 */
	.base_row {
		display: flex;
		flex-direction: row;
	}

	/* 基础dialog */
	.base_dialog {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0px;
		background: rgba(0, 0, 0, 0.5);
	}

	/* *************************************** */
	.customCallout {
		box-sizing: border-box;
		background-color: #fff;
		border: 1px solid #ccc;
		border-radius: 30px;
		width: 150px;
		height: 40px;
		display: inline-flex;
		padding: 5px 20px;
		justify-content: center;
		align-items: center;
	}

	.content {
		flex: 0 1 auto;
		margin: 0 10px;
		font-size: 14px;
	}
</style>