关于uniapp写微信小程序map组件点聚合功能的坑

总所周知,官方文档,最为致命(uniapp和微信官方都一个屌样)。那坑是管挖不管埋，简直坑人。

由于是点聚合，就不能在map组件里用markers属性直接添加点集合，需要使用addMarkers方法进行点的添加。

第一坑enableDefaultStyle要设为false

默认不设置enableDefaultStyle为true,使用默认样式,这样一来渲染出来的点的气泡属性就会不生效,包括label属性,还有iconPath等都会被默认样式覆盖。

onReady(){//这里是onReady钩子函数
    this.mapctx = uni.createMapContext("map", this);
    this.mapctx.initMarkerCluster({
            enableDefaultStyle: false,
            zoomOnClick: true,
            gridSize: 60,
            complete(res) {
                    console.log('initMarkerCluster', res)
            }
    });
}

第二坑 要自定义点聚合样式

要使用markerClusterCreate事件去监听缩放,然后动态的形成点聚合。然后会默认图标，iconPath我用一个长款1px的透明png解决了。

this.mapctx.on("markerClusterCreate", (e) => {
    console.log("markerClusterCreate", e);
    const {
            center,
            clusterId,
            markerIds
    } = e.clusters[0];
    console.info('clusterId', clusterId)
    this.mapctx.addMarkers({
            markers: [{
                    iconPath:'../../static/juhe.png',//透明png
                    ...center,
                    width: 50,
                    height: 50,
                    clusterId, // 必须
                    label: {
                            content: markerIds.length + '',
                            fontSize: 20,
                            width: 60,
                            height: 60,
                            bgColor: '#00ff00',
                            borderRadius: 30,
                            textAlign: 'center',
                            anchorX: 0,
                            anchorY: -30,
                    }
            }],
            clear: false,
            complete(res) {
                    console.log('addMarkers', res);
            }
    })
});

下面是完整代码

<template>
	<view class="map">
		<map id="map" class="map-main" :scale="scale" @callouttap="callouttap" :latitude="latitude"
			:longitude="longitude">
		</map>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: 25.11624,
				longitude: 102.75205,
				scale: 10,
				// latitude: 24.89297420361965,
				// longitude: 102.8086724230957,
				// scale: 12,
				covers: [],
				cityIndex: 0,
				cityList: [],
				mapctx: null
			};
		},
		onReady() {
			this.mapctx = uni.createMapContext("map", this);
			this.mapctx.initMarkerCluster({
				enableDefaultStyle: false,
				zoomOnClick: true,
				gridSize: 60,
				complete(res) {
					console.log('initMarkerCluster', res)
				}
			});

			this.mapctx.on("markerClusterCreate", (e) => {
				console.log("markerClusterCreate", e);
				const {
					center,
					clusterId,
					markerIds
				} = e.clusters[0];
				console.info('clusterId', clusterId)
				this.mapctx.addMarkers({
					markers: [{
						iconPath:'../../static/juhe.png',
						...center,
						width: 50,
						height: 50,
						clusterId, // 必须
						label: {
							content: markerIds.length + '',
							fontSize: 20,
							width: 60,
							height: 60,
							bgColor: '#00ff00',
							borderRadius: 30,
							textAlign: 'center',
							anchorX: 0,
							anchorY: -30,
						}
					}],
					clear: false,
					complete(res) {
						console.log('addMarkers', res);
					}
				})
			});
			this.mapctx.on("markerClusterClick", (e) => {
				console.log("markerClusterClick", e);
			});
			/** */
			this.mapctx.addMarkers({
				markers: [{
						"id": 0,
						"latitude": 24.89297420361965,
						"longitude": 102.8086724230957,
						"width": 30,
						"height": 50,
						"callout": {
							"content": "咯咯咯",
							"color": "#000000",
							"fontSize": 14,
							"borderRadius": 10,
							"bgColor": "#ffffff",
							"padding": 10,
							"display": "ALWAYS"
						},
						"postId": "1782579355046776832",
						"joinCluster": true,
					},
					{
						"id": 1,
						"latitude": 24.877401893314159,
						"longitude": 102.82935761901855,
						"width": 30,
						"height": 50,
						"callout": {
							"content": "123",
							"color": "#000000",
							"fontSize": 14,
							"borderRadius": 10,
							"bgColor": "#ffffff",
							"padding": 10,
							"display": "ALWAYS"
						},
						"postId": "1782321630589095936",
						"joinCluster": true,
					},
					{
						"id": 2,
						"latitude": 24.891742,
						"longitude": 102.819315,
						"width": 30,
						"height": 50,
						"callout": {
							"content": "111",
							"color": "#000000",
							"fontSize": 14,
							"borderRadius": 10,
							"bgColor": "#ffffff",
							"padding": 10,
							"display": "ALWAYS"
						},
						"postId": "1782299061580337152",
						"joinCluster": true,
					}
				],
				clear: true,
				complete(res) {
					console.log('addMarkers', res);
				}
			}) 
			
		},
		methods: {
			callouttap(val) {
				console.info(val)

			},
			
		}
	}
</script>

<style lang="scss">
	.map {
		&-main {
			height: 100vh;
			width: 100%;
		}

		&-btn {
			position: absolute;
			right: 10px;
			top: 10px;
			background: #fff;
			padding: 2px 10px;
		}
	}
</style>