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 当前身处位置