最近有個需求要點擊導航然后跳出各家導航軟件
話不多出直接貼出代碼：這個可以作為組件引入
<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®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}
</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 當前身處位置
