vue项目H5调起高德或百度地图手机应用，或调起高德百度网页版实现导航功能（已实现）

需求说明：H5实现唤起高德和百度地图导航到目标景点的功能

分析：用户通过点击选择使用百度还是高德地图，点击后调用guide方法，判断设备上是否有高德或者百度APP，有就直接调用APP，如果没有就调用网页版

实现效果

在这里插入图片描述

实现代码

//导航
guide(signMap) {let self = this;if (self.partnerAddress && self.partnerAddress != '') {//景点位置partnerAddress 景点经纬度lng latvar 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.webkitHiddenif (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.webkitHiddenif (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";//由于打开需要1～2秒，利用这个时间差来处理－－打开app后，返回h5页面会出现页面变成app下载页面，影响用户体验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) {//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";//由于打开需要1～2秒，利用这个时间差来处理－－打开app后，返回h5页面会出现页面变成app下载页面，影响用户体验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, //IE内核presto: u.indexOf('Presto') > -1, //opera内核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/), //ios终端android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器iPad: u.indexOf('iPad') > -1, //是否iPadwebApp: u.indexOf('Safari') == -1, //是否web应用程序，没有头部与底部weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）qq: u.match(/\sQQ/i) == " qq", //是否QQisBaidu: u.indexOf('baiduboxapp') !== -1, //是否为百度浏览器isqqBrowser: u.indexOf('mqqbrowser') !== -1, //是否为qq浏览器isWxBrowser: u.indexOf('micromessenger') !== -1, //是否为微信浏览器isUc: u.indexOf('ucbrowser') !== -1, //是否为uc浏览器};},