微信小程序：地图markers聚合 initMarkerCluster

最新推荐文章于 2024-07-24 15:15:45 发布

Crazy_GirlLL

最新推荐文章于 2024-07-24 15:15:45 发布

阅读量4.2k

点赞数 2

分类专栏：小程序个性化地图地图文章标签：小程序

本文链接：https://blog.csdn.net/Crazy_GirlLL/article/details/112967965

版权

本文介绍了如何在微信小程序中实现地图markers的聚合功能，通过代码示例展示了具体实现过程。虽然在微信开发者工具中可能无法预览效果，但真机调试或发布体验版能观察到准确的聚合展示。

摘要由CSDN通过智能技术生成

效果图

上代码：

	//使用聚合效果
	markerCluster() {
		this.data.map.initMarkerCluster({
			enableDefaultStyle: true,
			gridSize: 100,
			zoomOnClick: true,
			success: (res) => {
				console.log(res)
			},
			complete: (res) => {
				console.log(res)
			},
		})
		// enableDefaultStyle 为 true 时不会触发改事件
		// this.data.map.on('markerClusterCreate', (res) => {
		// 	console.log('clusterCreate', res)
		// 	const clusters = res.clusters
		// 	const markers = clusters.map((cluster) => {
		// 		const { center, clusterId, markerIds } = cluster
		// 		console.log(center)
		// 		return {
		// 			...center,
		// 			width: 0,
		// 			height: 0,
		// 			clusterId, // 必须
		// 			label: {
		// 				content: markerIds.length + '',
		// 				fontSize: 20,
		// 				width: 60,
		// 				height: