APP/pages/common/map/index.nvue

<template>
	<view class="container">
		<map class="map" :latitude="latitude" :longitude="longitude" :markers="covers" @markertap="onMarkerTap"
			:scale="16"></map>

		<!-- 加载提示 -->
		<view v-if="loading" class="loading-mask">
			<view class="loading-content">加载中...</view>
		</view>

	</view>
</template>

<script>
	import Common from "@/utils/Common.js";
	export default {
		data() {
			return {
				latitude: 39.909,
				longitude: 116.39742,
				covers: [],
				loading: true,
				markerData: [],
				clickMarker: {
					"deviceId": "",
					"deviceName": "",
					"deviceImei": "",
					"deviceMac": "",
					"communicationMode": null,
					"devicePic": "",
					"typeName": "",
					"bluetoothName": "",
					"deviceStatus": 1,
					"personnelInfo": null,
					"sendMsg": null,
					"mainLightMode": null,
					"laserLightMode": "",
					"batteryPercentage": "",
					"chargeState": "0",
					"batteryRemainingTime": "0",
					"onlineStatus": 0,
					"longitude": "",
					"latitude": "",
					"address": "",
					"alarmStatus": null,
					"lightBrightness": null
				},
				Status: {
					BottomMenu: {
						show: false,
						showHeader: true,
						menuItems: [{
								text: '高德地图',
								value: 'amap',
								icon: ''
							},
							{
								text: '百度地图',
								value: 'baidumap',
								icon: ''
							}
						],
						activeIndex: -1,
						bgColor: '#2a2a2a',
						itemBgColor: '#3a3a3a',
						textColor: '#ffffffde',
						textAlign: 'flex-start',
						title: '选择导航',
						showDivider: false,
						dividerColor: '#00000000',
						dividerThickness: '0rpx',
						dividerMargin: '10rpx',
						itemHeight: '80rpx',
						type: '',
						showBtn: false,
						btnBgColor: "#bbe600",
						btnText: "确定",
						btnTextColor: "#232323de",
						showMask: true,
						maskBgColor: '#00000066',
						showClose: false
					}
				}

			}
		},
		onLoad() {
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('Map', (receivedData) => {
				console.log("地图页收到数据",receivedData);
				this.loading = true;
				this.covers = [];
				const dataContent = receivedData.data;

				if (Array.isArray(dataContent)) {
					const validDevices = dataContent.filter(device =>
						device.latitude && device.longitude &&
						device.latitude !== '' && device.longitude !== ''
					);
					this.markerData = validDevices;
					if (validDevices.length > 0) {
						this.processMultipleMarkers(validDevices);
					} else {
						console.log('无有效经纬度');
						this.loading = false;
					}
				} else if (typeof dataContent === 'object' && dataContent !== null) {
					if (this.validateMarker(dataContent)) {
						this.markerData = [dataContent];
						this.processSingleMarker(dataContent);
					} else {
						console.log('经纬度无效');
						this.loading = false;
					}
				}
			});
		},
		methods: {
			showAction() {
				
				let gd=plus.runtime.isApplicationExist({
						pname: 'com.autonavi.minimap',    // 安卓高德包名
						action: 'iosamap://'              // iOS高德 Scheme
					});
					
				let bd= plus.runtime.isApplicationExist({
							pname: 'com.baidu.BaiduMap',      // 安卓百度包名
							action: 'baidumap://'             // iOS百度 Scheme
						});
				let list=[];
				let gdStr='高德地图';
				let bdStr='百度地图';
				console.log("gd=",gd);
				console.log("bd=",bd);
				list=[gdStr,bdStr];
				uni.showActionSheet({
					title: '选择地图',

					itemList:list ,
					success: (res)=> {
						let mapType = 'amap';
						if (res.tapIndex == 1) {
							mapType = 'baiduMap';
							if(!bd){
								uni.showToast({
									icon:"error",
									title:'未安装'+bdStr
								});
								return;
							}
						}
						
						if(res.tapIndex==0 && !gd) {
							uni.showToast({
								icon:"error",
								title:'未安装'+gdStr
							})
							return;
						}
						
						
						let marker = this.clickMarker;
						Common.MapNavi(marker.longitude, marker.latitude, marker.address, mapType).catch(
						ex => {
							uni.showToast({
								icon: "error",
								title: '无法打开地图'
							});
						});

					},
				})

			},

			navigatMap(e) {
				console.log("点位被点击,", e);
			},
			processSingleMarker(marker) {
				const lat = parseFloat(marker.latitude);
				const lng = parseFloat(marker.longitude);
				this.latitude = lat;
				this.longitude = lng;

				this.covers = [{
					id: marker.id+"",
					latitude: lat,
					longitude: lng,
					iconPath: '/static/images/common/mapLocation.png',
					width: 30,
					height: 50,
					anchor: {
						x: 0.5,
						y: 0.5
					},
					callout: {
						content: marker.deviceName
					}					
				}];
				
				console.log("covers=",this.covers);
				this.loading = false;
			},

			processMultipleMarkers(markers) {
				const first = markers[0];
				this.latitude = parseFloat(first.latitude);
				this.longitude = parseFloat(first.longitude);

				this.covers = markers.map((marker, index) => ({
					id: marker.id+"",
					latitude: parseFloat(marker.latitude),
					longitude: parseFloat(marker.longitude),
					iconPath: '/static/images/common/mapLocation.png',
					width: 30,
					height: 50,
					anchor: {
						x: 0.5,
						y: 0.5
					},
					callout: {
						content: marker.deviceName
					}
				}));
				this.loading = false;
			},

			validateMarker(marker) {
				const lat = parseFloat(marker.latitude);
				const lng = parseFloat(marker.longitude);
				return !isNaN(lat) && !isNaN(lng);
			},

			onMarkerTap(e) {
				console.log('点击了标记', e);
				let marker = this.markerData.find(item => {
					return item.id == e.detail.markerId
				});
				console.log('点击了标记', marker);
				if (marker) {
					this.clickMarker = marker;
					this.showAction();
				}
			}
		}
	}
</script>

<style>
	/* nvue 全屏必须这样写 */
	.container {
		flex: 1;
		box-sizing: border-box;
	}

	.map {
		width: 750rpx;
		flex: 1;
	}

	.loading-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		justify-content: center;
		align-items: center;
		z-index: 999;
	}

	.loading-content {
		color: #fff;
		font-size: 28rpx;
		padding: 20rpx 30rpx;
		background-color: rgba(0, 0, 0, 0.7);
		border-radius: 8rpx;
	}
</style>