uniapp各大平台导航组件
最近有个需求要点击导航然后跳出各家导航软件
话不多出直接贴出代码：这个可以作为组件引入
{{title}}高德地图百度地图腾讯地图取消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®ion=全国&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}.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;}使用：
// lat, lng 要去的经纬度 myLat myLng name 当前身处位置
