patrol-maintain-mobile/packageA/pages/generalList/generalList.vue

<template>
	<view class="content">
		<map id="map" class="map" style="width: 100%;height: 100vh;"  :show-location="true" :latitude="latitude" :longitude="longitude"></map>
	</view>
</template>

<script>
	const img = '../../../static/img/logo.png';

	export default {
		data() {
			return {
				latitude: 23.099994,
				longitude: 113.324520,
			}
		},
		onReady() {
			this._mapContext = uni.createMapContext("map", this);

			// 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})
			this._mapContext.initMarkerCluster({
				enableDefaultStyle: false,
				zoomOnClick: true,
				gridSize: 60,
				complete(res) {
					console.log('initMarkerCluster', res)
				}
			});

			this._mapContext.on("markerClusterCreate", (e) => {
				console.log("markerClusterCreate", e);
			});

			this.addMarkers();
		},
		methods: {

			addMarkers() {
				const marker = {
					id: 1,
					iconPath: img,
					width: 50,
					height: 50,
					joinCluster: true, // 指定了该参数才会参与聚合
					label: {
						width: 50,
						height: 30,
						borderWidth: 1,
						borderRadius: 10,
						bgColor: '#ffffff'
					}
				};

				const positions = [{
					latitude: 23.099994,
					longitude: 113.324520,
				}, {
					latitude: 23.099994,
					longitude: 113.322520,
				}, {
					latitude: 23.099994,
					longitude: 113.326520,
				}, {
					latitude: 23.096994,
					longitude: 113.329520,
				}]

				const markers = []

				positions.forEach((p, i) => {
					const newMarker = Object.assign(marker, p)
					newMarker.id = i + 1
					newMarker.label.content = `label ${i + 1}`
					markers.push(newMarker)

					this._mapContext.addMarkers({
						markers,
						clear: false,
						complete(res) {
							console.log('addMarkers', res)
						}
					})
				})
			}
		}
	}
</script>

<style>
	.content {
		flex: 1;
	}

	.map {
		flex: 1;
	}
</style>