tongli_WeChat/pages/map/map.vue

<template>
	<view class="content">
		<map id="map" class="map" :show-location="true" :latitude="latitude" :longitude="longitude"></map>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: 33.338538,
				longitude: 120.153567,
			}
		},
		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() {
				console.log(111,this._mapContext)
				this._mapContext.addGroundOverlay({
					id: 1,
					src: 'https://static.ticket.sz-trip.com/yandu/images/maps/6/53/25.png',
					bounds: {
						southwest: {//左下角GPS
							longitude: 119.700158,
							latitude: 33.112837
						},
						northeast: {//右上角GPS
							longitude: 120.25057,
							latitude: 33.458095
						}
					},
					zIndex: 1, // 图层绘制顺序
					success: () => {
						console.log("显示成功", southwest, northeast)
					},
					fail: (e) => {
						console.log("显示失败", e)
					},
					complete: res => {
						console.log(res)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100vw;
		height: 100vh;
	}

	.map {
		width: 100vw;
		height: 100vh;
	}
</style>