山西建设网站,如网站性质为公司 请以企业备案,wordpress文章html页面,温州装修公司我们在用手机查看网页时可以通过传入经纬度去设置目的地然后跳转到对应的地图导航软件#xff0c;如果没有下载软件则会跳转到下载界面
注意#xff1a;
高德地图是一定会跳转到一个新网页然后去询问用户是否需要打开软件百度和腾讯地图是直接调用软件的这个方法有缺陷如果没有下载软件则会跳转到下载界面
注意
高德地图是一定会跳转到一个新网页然后去询问用户是否需要打开软件百度和腾讯地图是直接调用软件的这个方法有缺陷因为我们判断用户是否下载软件是通过监听用户的行为判断页面是否发生变化来决定的但是某些移动操作系统如iOS在使用深度链接时可能总是提示用户确认是否打开第三方应用。此时我们如果不去点击确认打开第三方应用过两秒后页面也会自动跳转到对应的下载界面这种行为是由操作系统控制的可能没有办法绕过它。第三方应用程序的行为也起着作用。如果应用程序不能正确处理深度链接它可能总是提示用户打开应用程序即使它已经安装了。 不幸的是由于这种行为受到移动操作系统和第三方应用的影响可能没有一个放之四海而皆通的解决方案这种行为可能会因不同的设备和应用版本而有所不同。当你在应用中实现深度链接时测试和考虑你所瞄准的特定应用行为是很重要的。 代码
templatediv classapp-containerdiv v-for(location, index) in locations :keyindexspan{{ location.name }}:/spanel-selectv-modelselectedType[index]clearablechange(e) navigateToMap(location, selectedType[index])el-option label高德地图 valuegaode/el-optionel-option label腾讯地图 valuetencent/el-optionel-option label百度地图 valuebaidu/el-option/el-select/div/div
/templatescript setup
import { ref, toRefs, reactive } from vue;const data reactive({selectedType: [],userLocation: {},appOpenedFlag: false,
});const { selectedType, userLocation, appOpenedFlag } toRefs(data);const locations [{name: 南京热河路,latitude: 32.088169,longitude: 118.74247,destination: 32.088169,118.74247,},{name: 秦皇岛,latitude: 39.9658,longitude: 119.592224,destination: 39.9658,119.592224,},{name: 大理古城,latitude: 25.69547,longitude: 100.1655,destination: 25.69547,100.1655,},
];// 获取用户当前位置
function getCurrentLocation() {navigator.geolocation.getCurrentPosition((position) {userLocation.value {lat: position.coords.latitude,lng: position.coords.longitude,};});
}// 生成导航链接
function navigateToMap(location, type) {getCurrentLocation();const { name, latitude, longitude, destination } location;let url ;switch (type) {case gaode:url https://uri.amap.com/navigation?to${longitude},${latitude},${name}modecarpolicy2srcmyLocationcoordinategaodecallnative1;break;case tencent:url qqmap://map/routeplan?typedrivefromcoord${userLocation.value.lat},${userLocation.value.lng}tocoord${destination}refereryourAppName;break;case baidu:url baidumap://map/direction?origin${userLocation.value.lat},${userLocation.value.lng}destination${destination}modedrivingsrcyourAppName;break;}appOpenedFlag.value false;window.location.href url;// 检查用户在打开应用程序后是否返回到网页setTimeout(() {if (!appOpenedFlag.value) {redirectToDownloadPage(type);}}, 2000);
}// 回调函数用于在应用程序成功打开时设置标志
window.addEventListener(visibilitychange, () {if (document.visibilityState visible) {appOpenedFlag.value true;}
});// 重定向到下载页面
function redirectToDownloadPage(type) {switch (type) {case gaode:window.location.href https://www.amap.com/;break;case baidu:window.location.href https://map.baidu.com/;break;case tencent:window.location.href https://map.qq.com/;break;}
}
/script
效果
