之前，我爱模版网分享过app端打开手机自带地图APP进行导航：
uni-app App端掉起地图进行导航
这次分享的是uni-app H5端打开地图进行导航，当然，受限于微信浏览器的限制，在微信浏览器无法直接打开导航app，只能跳转到各导航app的官网地图，在普通手机浏览器能够直接打开导航app进行导航。
废话不多说，直接上代码：
<map :scale="14" :show-location="true" :show-compass="true" style="width: 100%; height: calc(100vh - 44px);" :latitude="position.latitude" :longitude="position.longitude" :markers="markers" @markertap="handleOpen" @callouttap="handleOpen" /> <view class="application" @click="handleOpen">开始导航</view>
import {ref, reactive} from 'vue'
import { onLoad } from '@dcloudio/uni-app'
const countryName = ref('')
const position = reactive({
latitude: 31.713161,
longitude: 117.330288,
name: '合肥渡江纪念馆',
address: '合肥市包河区云谷路299号'
})
const markers = reactive([{
id: 0,
latitude: position.latitude, //纬度
longitude: position.longitude, //经度
iconPath: '../../static/img/icon-position.png', //显示的图标
rotate: 0, // 旋转度数
width: 20, //宽
height: 25, //高
title: '标记位置', //标注点名
alpha: 0.5, //透明度
callout: {
//自定义标记点上方的气泡窗口 点击有效
content: position.name, //文本
padding: 10,
color: '#3D3D3D', //文字颜色
fontSize: "36rpx", //文本大小
borderRadius: 10, //边框圆角
bgColor: '#fff', //背景颜色
display: 'ALWAYS', //常显
}
}])
function handleOpen() {
uni.showActionSheet({
itemList: ['高德地图', '百度地图', '腾讯地图'],
success: function(res) {
guide(res.tapIndex)
}
})
}
function guide(signMap) {
if (position.longitude && position.latitude) {
//地点位置position.name 地点经纬度lng lat
const lng = position.longitude
const lat = position.latitude
const poiname = position.name
if (signMap === 0) {
// 高德地图
uni.getSystemInfo({
success: (res) => {
if (res.platform == 'android') {
window.location.href = `androidamap://viewMap?sourceApplication=appname&poiname=${poiname}&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=${poiname}`
}
}, 2000);
} else {
window.location.href = `iosamap://viewMap?sourceApplication=appname&poiname=${poiname}&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=${poiname}`
}
}, 2000);
}
}
})
} else if (signMap == 1) {
// // 百度地图
uni.getSystemInfo({
success: (res) => {
if (res.platform == 'android') {
let d = new Date();
let t0 = d.getTime();
window.location.href = `androidamap://viewMap?sourceApplication=appname&poiname=${poiname}&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=${poiname}&content=地点&output=html&src=webapp.baidu.openAPIdemo`
}
if (t1 - t0 >= 3000) {
clearInterval(delay);
}
}, 1000);
} else {
let d = new Date();
let t0 = d.getTime();
window.location.href = `iosamap://viewMap?sourceApplication=appname&poiname=${poiname}&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=${poiname}&content=地点&output=html&src=webapp.baidu.openAPIdemo`
}
if (t1 - t0 >= 3000) {
clearInterval(delay);
}
}, 1000);
}
}
})
} else {
// // 腾讯地图
uni.getSystemInfo({
success: (res) => {
if (res.platform == 'android') {
window.location.href = `androidamap://viewMap?sourceApplication=appname&poiname=${poiname}&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://apis.map.qq.com/uri/v1/marker?marker=coord:(${lat},${lng})&addr:${poiname}`
}
}, 2000);
} else {
window.location.href =
'iosamap://viewMap?sourceApplication=appname&poiname=' + position
.name + '&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://apis.map.qq.com/uri/v1/marker?marker=coord:(${lat},${lng})&addr:${poiname}`
}
}, 2000);
}
}
})
}
} else {
uni.$app.showToast('无效的经纬度')
}
}