需求说明：H5实现唤起高德和百度地图导航到目标景点的功能
分析：用户通过点击选择使用百度还是高德地图，点击后调用guide方法，判断设备上是否有高德或者百度APP，有就直接调用APP，如果没有就调用网页版
实现效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
guide(signMap) {
let self = this;
if(self.partnerAddress && self.partnerAddress != '') {
var lng = self.lng;
var lat = self.lat;
if(signMap == 'gd') {
if (self.customBrowserVersion().android) {
window.location.href="androidamap://viewMap?sourceApplication=appname&poiname="+self.partnerAddress+"&lat="+lat+"&lon="+lng+"&dev=0";
setTimeout(function(){
let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden ||window.document.webkitHidden
if(typeof hidden =="undefined" || hidden ==false){
window.location.href ="https://uri.amap.com/marker?position="+lng+","+lat+"&name="+self.partnerAddress;
}
}, 2000);
}else if (self.customBrowserVersion().ios) {
window.location.href="iosamap://viewMap?sourceApplication=appname&poiname="+self.partnerAddress+"&lat="+lat+"&lon="+lng+"&dev=0";
setTimeout(function(){
let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden ||window.document.webkitHidden
if(typeof hidden =="undefined" || hidden ==false){
window.location.href ="https://uri.amap.com/marker?position="+lng+","+lat+"&name="+self.partnerAddress;
}
}, 2000);
}
}else if(signMap == 'bd') {
if (self.customBrowserVersion().android) {
let d = new Date();
let t0 = d.getTime();
window.location.href="androidamap://viewMap?sourceApplication=appname&poiname="+self.partnerAddress+"&lat="+lat+"&lon="+lng+"&dev=0";
var delay = setInterval(function(){
var d = new Date();
var t1 = d.getTime();
if( t1-t0<3000 && t1-t0>2000){
window.location.href ="http://api.map.baidu.com/marker?location="+lat+","+lng+"&title="+self.partnerAddress+"&content=景点&output=html&src=webapp.baidu.openAPIdemo";
}
if(t1-t0>=3000){
clearInterval(delay);
}
},1000);
}
if (self.customBrowserVersion().ios) {
let d = new Date();
let t0 = d.getTime();
window.location.href="iosamap://viewMap?sourceApplication=appname&poiname="+self.partnerAddress+"&lat="+lat+"&lon="+lng+"&dev=0";
let delay = setInterval(function(){
var d = new Date();
var t1 = d.getTime();
if( t1-t0<3000 && t1-t0>2000){
window.location.href ="http://api.map.baidu.com/marker?location="+lat+","+lng+"&title="+self.partnerAddress+"&content=景点&output=html&src=webapp.baidu.openAPIdemo";
}
if(t1-t0>=3000){
clearInterval(delay);
}
},1000);
}
}
}else{
this.$toast.showToast('暂不知道该景区位置')
}
},
customBrowserVersion(){
var u = navigator.userAgent;
return {
trident: u.indexOf('Trident') > -1,
presto: u.indexOf('Presto') > -1,
webKit: u.indexOf('AppleWebKit') > -1,
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
mobile: !!u.match(/AppleWebKit.*Mobile.*/),
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1,
iPhone: u.indexOf('iPhone') > -1 ,
iPad: u.indexOf('iPad') > -1,
webApp: u.indexOf('Safari') == -1,
weixin: u.indexOf('MicroMessenger') > -1,
qq: u.match(/\sQQ/i) == " qq",
isBaidu: u.indexOf('baiduboxapp') !== -1,
isqqBrowser: u.indexOf('mqqbrowser') !== -1,
isWxBrowser: u.indexOf('micromessenger') !== -1,
isUc: u.indexOf('ucbrowser') !== -1,
};
},
|
1.百度地图需要判断是否切出浏览器，高德地图需要做反应时间判断
2.当H5页面跳转到高德地图后下面的js将不再执行，所以判断是否切出浏览器即可。
3.当H5页面跳转到百度地图APP后下面的js依旧会执行，所以要判断时间。
wechat
