问题：使用vue开发H5页面的时候需要跳转地图App并导航到指定位置
实现功能：点击按钮打开第三方app导航，如果没有打开，或者没有安装，则运行网页地图导航
实现效果图如下：
1.点击按钮跳转
2.浏览器弹窗获取权限
3.打开导航成功
直接上代码：
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Welcome to Your Vue.js App" />
<div @click="handlClick(1)" style="marginBottom:20px">打开高德地图app</div>
<div @click="handlClick(2)">打开百度地图</div>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
name: "App",
components: {
HelloWorld,
},
data() {
return {
//定义起点位置
StartXY: {
lng : 116.327404,
lat : 39.971385,
city: '北京市'
},
//定义终点位置
EndXY: {
lng: 116.545123,
lat: 39.915599,
city: "北京市",
}
}
},
methods: {
handlClick(val) {
/* Start 判断手机是IOS还是安卓 */
let u = navigator.userAgent;
//判断是否安卓
let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;
// 判断是否IOS
let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
/* End */
//判断是否点击高德地图
if(val === 1) {
//判断是否是安卓手机
if(isAndroid) {
let queryStr = `?sourceApplication=msite&lat=${this.StartXY.lat}&lon=${this.StartXY.lng}&dev=1&style=2`
window.location.href = `androidamap://navi${queryStr}`;
}else if(isIOS) {
//IOS手机————高德地图不区分ios和安卓
let queryStr = `?sourceApplication=msite&lat=${this.StartXY.lat}&lon=${this.StartXY.lng}&dev=1&style=2`
window.location.href = `androidamap://navi${queryStr}`;
let startTime = Date.now();
let count = 0;
let endTime = 0;
let t = setInterval(function () {
count += 1;
endTime = Date.now() - startTime;
if (endTime > 7000) {
clearInterval(t);
}
if (count < 30) return;
if (!(document.hidden || document.webkitHidden)) {
window.location.href =
"https://uri.amap.com/marker?position=116.545123,39.915599";
}
}, 200);
window.onblur = function () {
clearInterval(t);
};
}
//百度地图
}else if(val === 2){
let queryStr = `?origin=name:我的位置|latlng:${this.StartXY.lat},${this.StartXY.lng}&destination=${this.EndXY.lat},${this.EndXY.lng}®ion=${this.EndXY.city}&coord_type=bd09ll&mode=driving`
if(isAndroid) {
window.location.href = `bdapp://map/direction${queryStr}`;
//以下代码为判断app是否已经打开
let startTime = Date.now();
let count = 0;
let endTime = 0;
let t = setInterval(function () {
count += 1;
endTime = Date.now() - startTime;
//如果800毫秒后还未打开，清楚定时器，直接打开浏览器端
if (endTime > 800) {
clearInterval(t);
}
if (count < 30) return;
//（是否打开的判断逻辑为当前页面是否进入后台）
if (!(document.hidden || document.webkitHidden)) {
window.location.href =
"http://api.map.baidu.com/direction" +
queryStr +
"&output=html";
}
//20为20毫秒判断一次，app是否打开
}, 20);
window.onblur = function () {
clearInterval(t);
};
}else if(isIOS) {
window.location.href = `baidumap://map/direction${queryStr}`;
}
}
}
},
};
</script>
https://lbsyun.baidu.com/index.php?title=uri/api/web --百度地图web调起API官方文档
https://lbs.amap.com/api/webservice/guide/api/direction --- 高德地图web调起API官方文档
