uniapp html5页面唤起手机地图app
<view @click="openMapHandle">
<text class="location">地点</text>
<text class="address">地址详情</text>
<view class="btn" style="">去这里</view>
</view>
//选择打开的地图
const openMapHandle = () => {
// //点击跳转地图
// uni.openLocation({
// latitude: latitude.value / 1,
// longitude: longitude.value / 1,
// name: name.value,
// address: addr.value,
// })
uni.showActionSheet({
title: '请选择系统中已安装的地图应用导航',
itemList: ['百度地图', '高德地图', '腾讯地图'],
success: function(res) {
console.log(62,res)
openMap(res.tapIndex)
},
fail: function(res) {
console.log(res.errMsg);
}
});
}
//打开地图
const openMap = (tapIndex) => {
uni.showLoading({
title: '跳转中'
});
if (destination.value.name && destination.value.name != '') {
//地点位置destination.value.name 地点经纬度lng lat
var lng = destination.value.longitude;
var lat = destination.value.latitude;
if (tapIndex == 0) {
// 百度地图
uni.getSystemInfo({
success: (res) => {
let d = new Date();
let t0 = d.getTime();
window.location.href = "baidumap://map/marker?location=" + lat + "," + lng + "&title="
+ destination.value.name + "&content="+ destination.value.address +"&traffic=on"; //百度
//由于打开需要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 =
"https://api.map.baidu.com/marker?location=" + lat +
"," + lng + "&title=" + destination.value.name +
"&content=地点&output=html&src=webapp.baidu.openAPIdemo";
}
if (t1 - t0 >= 3000) {
clearInterval(delay);
}
}, 1000);
}
})
} else if (tapIndex == 1) {
// 高德地图
uni.getSystemInfo({
success: (res) => {
if (res.platform === "android") {
window.location.href =
"androidamap://viewMap?sourceApplication=appname&poiname="
+ destination.value.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
} else {
window.location.href =
"iosamap://viewMap?sourceApplication=appname&poiname="
+ destination.value.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://uri.amap.com/marker?position=" + lng + "," +
lat + "&name=" + destination.value.name;
}
}, 2000);
}
})
} else {
// 腾讯地图
uni.getSystemInfo({
success: (res) => {
window.location.href = "qqmap://map/marker?marker=coord:" + lat + "," + lng + ";title:"
+ destination.value.name + ";addr:"+ destination.value.address +"&referer=key";
//判断是否跳转
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})&title:${destination.value.name}&addr:${destination.value.address}`
}
}, 2000);
}
})
}
} else {
uni.showToast({
title: '暂不知道该地点位置',
icon: 'none',
duration: 2000,
});
}
setTimeout(function() {
uni.hideLoading();
}, 2000);
}