APP/pages/common/map/index.vue

<template>
	<view>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 100vh;" 
					:latitude="latitude" 
					:longitude="longitude" 
					:markers="covers"
					@markertap="onMarkerTap"
					:scale="16">
				</map>
			</view>
		</view>
		<!-- 加载提示 -->
		<view v-if="loading" class="loading-mask">
			<view class="loading-content">加载中...</view>
		</view>
	</view>
</template>


<script>
export default {
	data() {
		return {
			title: 'map',
			latitude: 39.909,  // 默认纬度
			longitude: 116.39742,  // 默认经度
			covers: [],  // 标记点数组
			loading: true,  // 加载状态
			markerData: []  // 存储原始标记数据
		}
	},
	onLoad() {
		// 获取事件通道
		const eventChannel = this.getOpenerEventChannel();
		// 监听传递过来的位置数据
		eventChannel.on('Map', (receivedData) => {
			this.loading = true;
			this.covers = [];
			//先获取data属性内容
			const dataContent = receivedData.data;
			//data是数组
			if (Array.isArray(dataContent)) {
				// 过滤掉经纬度为空的设备
				const validDevices = dataContent.filter(device => 
					device.latitude !== null && 
					device.longitude !== null && 
					device.latitude !== '' && 
					device.longitude !== ''
				);
				this.markerData = validDevices;
				if (validDevices.length > 0) {
					this.processMultipleMarkers(validDevices);
				} else {
					console.log('没有有效的设备经纬度数据');
					this.loading = false;
				}
			} 
			//data是单个设备对象
			else if (typeof dataContent === 'object' && dataContent !== null) {
				if (this.validateMarker(dataContent)) {
					this.markerData = [dataContent];
					this.processSingleMarker(dataContent);
				} else {
					console.log('单个设备数据缺少有效的经纬度');
					this.loading = false;
				}
			} 
		});
	},
	methods: {
		// 处理单个标记点
		processSingleMarker(marker) {
			// 转换经纬度为数字
			const lat = parseFloat(marker.latitude);
			const lng = parseFloat(marker.longitude);
			// 设置地图中心
			this.latitude = lat;
			this.longitude = lng;
			// 创建标记点
			this.covers = [{
				id: marker.deviceImei, // 适配deviceId字段
				latitude: lat,
				longitude: lng,
				iconPath: marker.devicePic || '/static/images/common/device.png',
				width: 40,
				height: 40,
				anchor: {x: 0.5, y: 0.5}, // 锚点在中心
				callout: {
					content: `ID: ${marker.deviceImei}`
				}
			}];
			
			this.loading = false;
		},
		
		// 处理多个标记点
		processMultipleMarkers(markers) {
			// 使用第一个有效标记点的位置作为地图中心
			const firstMarker = markers[0];
			this.latitude = parseFloat(firstMarker.latitude);
			this.longitude = parseFloat(firstMarker.longitude);
			
			// 转换所有有效标记点
			this.covers = markers.map((marker, index) => ({
				id: marker.deviceId || marker.id || marker.deviceImei || index + 1,
				latitude: parseFloat(marker.latitude),
				longitude: parseFloat(marker.longitude),
				iconPath: marker.devicePic || '/static/images/common/device.png',
				width: 40,
				height: 40,
				anchor: {x: 0.5, y: 0.5},
				callout: {
					content: `ID: ${marker.deviceImei}`,
				}
			}));
			
			this.loading = false;
		},
		
		// 验证标记点是否包含必要信息
		validateMarker(marker) {
			// 验证经纬度是否有效
			const hasValidLat = marker.latitude && marker.latitude !== '' && !isNaN(parseFloat(marker.latitude));
			const hasValidLng = marker.longitude && marker.longitude !== '' && !isNaN(parseFloat(marker.longitude));
			return hasValidLat && hasValidLng;
		},
		
		// 标记点点击事件
		onMarkerTap(e) {
			const clickedMarker = this.markerData.find(
				item =>item.deviceImei === e.markerId
			);
		}
	}
}
</script>


<style>
	.loading-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}

	.loading-content {
		color: #fff;
		font-size: 16px;
		padding: 12px 24px;
		background: rgba(0, 0, 0, 0.7);
		border-radius: 8px;
	}
	
	.empty-tip {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: rgba(0, 0, 0, 0.7);
		color: #fff;
		padding: 10px 20px;
		border-radius: 4px;
		z-index: 99;
	}
</style>