tqApp-webView/pages/realtimeWatch/module/appMap.vue

<template>
	<view class="realtimeWatch">
		<!-- <map
		  id="map"
		  :latitude="lat"
		  :longitude="lng"
		>
		</map>
		
		<view class="options">
			<view class="options-item" @click="showCar">
				<image
				  style="width: 100%; height: 100%"
				  :src="'https://www.yihaocg.com/mobile/image/location/boxselection.png'"
				/>
			</view>
		</view>
		<tq-car-user 
			ref="carChooseRef"
			@choosed="getChoosed"
		>
		</tq-car-user> -->
	</view>
</template>

<script>
const img = 'http://tq.5000v.com:8035/img/upload/2023/11/27/1_1_20231127115853A031.png';
export default {
	components: {
	},
	data() {
		return {
			_mapContext: null,
			lat: 23.099994,
			lng: 113.324520,
			markers: [], // 标注点
		}
	},
	onReady () {
		// this.queryLocation()
		// 创建map对象
		this._mapContext = uni.createMapContext("map", this);
		this.cluster();
			  
	},
	methods: {
		 // 查询自身位置
		queryLocation() {
		 
		  uni.getLocation({
		    type: "gcj02",
		    success: (res) => {
				const {latitude,longitude} = res
				  this.lat = latitude;
				  this.lng = longitude;
		    },
		    fail: (res) => {
		      console.log('定位失败',JSON.stringify(res));
		    }
		  });
		},
		//
		showCar() {
			this.$refs.carChooseRef.showDialog()
		},
		//选中数据
		getChoosed(data) {
			console.log(data,'data')
		},
		
		// 点聚合
		cluster() {
			// 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})
			this._mapContext.initMarkerCluster({
				enableDefaultStyle: false, // 是否使用默认样式
				zoomOnClick: true, // 点击聚合的点，是否改变地图的缩放级别
				gridSize: 60, // 聚合计算时网格的像素大小，默认60
				complete(res) {
					console.log('initMarkerCluster', res)
				}
			});

			this._mapContext.on("markerClusterCreate", (res) => {
				console.log("markerClusterCreate", res);
				const clusters = res.clusters
				const markers = clusters.map(cluster => {
					const {
						center,
						clusterId,
						markerIds
					} = cluster
					return {
						...center,
						width: 0,
						height: 0,
						clusterId, // 必须
						label: {
							content: markerIds.length + '',
							fontSize: 16,
							width: 50,
							height: 50,
							bgColor: '#00A3FA',
							borderRadius: 25,
							textAlign: 'center',
							anchorX: 0,
							anchorY: -20,
						}
					}
				})
				this._mapContext.addMarkers({
					markers,
					clear: false,
					complete(res) {
						console.log('clusterCreate addMarkers', res)
					}
				})
			});
			this._mapContext.on('markerClusterClick', (res) => {
				console.log('markerClusterClick', res)
			})
			this.addMarkers();
		},

		// 添加标记点
		addMarkers() {
			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) => {
				markers.push(
					Object.assign({}, {
						id: i + 1,
						iconPath: img,
						width: 28,
						height: 29,
						joinCluster: true, // 指定了该参数才会参与聚合
						callout:{
							bgColor: "#5AC2EB",
							color: "#fff",
							content: "客户名称",
							display: "ALWAYS",
							fontSize: "14",
							fontWeight: "bold",
							padding: 8,
							textAlign: "center"
						}
					}, p)
				)
			})
			console.log('markers', markers)
			this._mapContext.addMarkers({
				markers,
				clear: false,
				complete(res) {
					console.log('addMarkers', res)
				}
			})
		},

			  
		// 点击图标
		handleClickMarker(markerId) {
		  this.detailsId = this.vehMarkerId[markerId.detail.markerId].id;
		  this.vehicleDetails = this.vehMarkerId[markerId.detail.markerId].value;
		  this.details = true;
		},
	}
}
</script>

<style lang="scss" scoped>
.realtimeWatch {
	width: 100%;
	height: 100vh;
	position: relative;
	#map {
		width: 750rpx; 
		height: 100%;
	}
	.options {
		position: absolute;
		width: 72rpx;
		right: 30rpx;
		bottom: 156rpx;
		box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.15);
		z-index: 9999;
		
		.options-item {
			height: 72rpx;
			
		}
	}
}	
</style>