技術標籤：小程式個性化地圖地圖小程式

效果圖

上程式碼：

	//使用聚合效果
	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: 60,
		// 				bgColor: '#00ff00',
		// 				borderRadius: 30,
		// 				textAlign: 'center',
		// 				anchorX: 0,
		// 				anchorY: -30,
		// 			},
		// 		}
		// 	})
		// 	this.data.map.addMarkers({
		// 		markers,
		// 		clear: false,
		// 		complete(res) {
		// 			console.log('clusterCreate addMarkers', res)
		// 		},
		// 	})
		// })
	},
    onLoad: function () {
        this.markerCluster()
    }
 

需要注意的是：微信工具上是看不到聚合效果的，真機除錯的時候呢，有的時候顯示的也不是你預期的那樣，你可以釋出一個體驗版看，這樣比較準確，個人認為