uniapp各大平台导航组件

最近有个需求要点击导航然后跳出各家导航软件

话不多出直接贴出代码：这个可以作为组件引入

<template>
	<view>
		<view class="nav" :style="{color: customColor}" @click.stop="openMap">{{title}}</view>

		<!-- 弹窗仅在 H5 / App 显示 -->
		<uni-popup ref="popupRef" type="bottom">
			<view class="popup-content">
				<view class="option" @click.stop="selectMap('amap')">高德地图</view>
				<view class="option" @click.stop="selectMap('baidu')">百度地图</view>
				<view class="option" @click.stop="selectMap('tencent')">腾讯地图</view>
				<view class="cancel" @click.stop="popupRef.close()">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import {
		onReady
	} from '@dcloudio/uni-app';

	const props = defineProps({
		lat: {
			type: [Number, String],
			required: true
		},
		lng: {
			type: [Number, String],
			required: true
		},
		name: {
			type: String,
			default: '目标位置'
		},
		myLat: {
			type: [Number, String],
			required: true
		},
		myLng: {
			type: [Number, String],
			required: true
		},
		title: {
			type: String,
			default: '导航'
		},
		customColor: {
			tyep: String,
			default: 'red'
		}
	});

	const popupRef = ref(null);
	// const isIOS = computed(() => uni.getSystemInfoSync().platform === 'ios');

	// 判断平台
	const isWeChatMiniProgram = uni.getSystemInfoSync().uniPlatform === 'mp-weixin';

	// 打开地图弹窗或直接调用微信小程序地图
	function openMap() {

		if (isWeChatMiniProgram) {
			console.log("微信小程序打开地图", props.lat, props.lng, props.name);

			wx.openLocation({
				latitude: Number(props.lat),
				longitude: Number(props.lng),
				name: props.name,
				scale: 18,
				success: () => {

				},
				fail: (err) => {
					console.log("打开地图失败", err);

				}
			});
		} else {
			popupRef.value.open();
		}
	}

	// 选择地图跳转（H5 / App）
	function selectMap(type) {
		const {
			lat,
			lng,
			name
		} = props;
		const encodedName = encodeURIComponent(name);

		let url = '';
		const platform = uni.getSystemInfoSync().platform;
		const isIOS = platform === 'ios';

		// 判断是否为微信浏览器
		// const ua = window.navigator.userAgent.toLowerCase();
		// const isWeChatBrowser = ua.indexOf('micromessenger') !== -1;

		// if (isWeChatBrowser) {
		// 微信浏览器：使用网页地图跳转
		// #ifdef H5 
		switch (type) {
			case 'amap':
				url =
					`https://uri.amap.com/navigation?to=${lng},${lat},${encodedName}&mode=car&policy=1&src=webapp&coordinate=gaode`;
				break;
			case 'baidu':
				url =
					`https://api.map.baidu.com/direction?origin=latlng:${props.myLat},${props.myLng}|name:我的位置&destination=latlng:${lat},${lng}|name:${encodedName}&mode=driving&region=全国&output=html&src=yourCompanyName|yourAppName`;
				break;
			case 'tencent':
				url =
					`https://apis.map.qq.com/uri/v1/routeplan?type=drive&to=${encodedName}&tocoord=${lat},${lng}&policy=0&referer=yourAppName`;
				break;
		}
		console.log("跳转的URL:", url);
		popupRef.value.close();
		window.location.href = url;
		// #endif
		// } else {

		// #ifdef APP-PLUS
		//   //其它浏览器:唤醒APP - TOTO 由于H5无法判断手机是否安装对应APP,有对应APP则唤醒,无对应APP会被过滤掉
		let title = ''
		switch (type) {
			case 'amap':
				title = '高德地图'
				url = isIOS ?
					`iosamap://path?sourceApplication=app&dlat=${lat}&dlon=${lng}&dname=${encodedName}&dev=0&t=0` :
					`amapuri://route/plan/?dlat=${lat}&dlon=${lng}&dname=${encodedName}&dev=0&t=0`;
				break;
			case 'baidu':
				title = '百度地图'
				url =
					`baidumap://map/direction?origin=我的位置&destination=latlng:${lat},${lng}|name:${encodedName}&mode=driving&coord_type=gcj02`;
				break;
			case 'tencent':
				title = '腾讯地图'
				url = `qqmap://map/routeplan?type=drive&tocoord=${lat},${lng}&to=${encodedName}&coord_type=1`;
				break;
		}
		plus.runtime.openURL(url, function(res) {
			console.log("打开地图APP失败:", res);
			uni.showToast({
				title: "导航失败,请下载" + title,
				icon: 'none'
			})
		});
		// }
		// #endif



	}
</script>

<style scoped>
	.nav {
		text-align: center;
		color: red;
		font-size: 26upx;
	}

	.popup-content {
		background: #fff;
		padding: 20rpx;
	}

	.option {
		padding: 30rpx;
		text-align: center;
		border-bottom: 1px solid #eee;
	}

	.cancel {
		padding: 30rpx;
		text-align: center;
		color: #999;
	}
</style>

使用：

<MapNavigator :lat="" :lng="" :myLat="" :myLng="" :name="" />
// lat, lng 要去的经纬度   myLat myLng name 当前身处位置