let agent = navigator.userAgent.toLowerCase();
if (agent.match(/MicroMessenger/i) == "micromessenger" || agent.match(/QQ/i) == "qq" || !(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))) {
// 处于微信、QQ内置浏览器、PC端中
window.open(`https://uri.amap.com/marker?position=${markerLngLat[0]},${markerLngLat[1]}&callnative=1`)
} else {
// 外部浏览器中,获取地图 scheme 跳转协议(IOS和安卓)
let scheme = agent.indexOf("iphone") != -1 || agent.indexOf("ipad") != -1 ? "iosamap://path" : "amapuri://route/plan";
location.href = `${scheme}?sourceApplication=mhc&dlat=${markerLngLat[1]}&dlon=${markerLngLat[0]}&dname=&dev=0&t=0`
}
【以下回答由 GPT 生成】
问题描述: 在微信H5中,尝试通过代码唤醒高德地图app,但是没有反应。经过调查,发现微信不支持“scheme跳转协议”。当前想到的解决办法是通过高德官方链接打开一个地址,但这样会导致用户跳转到另一个H5页面,用户体验不佳。
解决方案: 为了在微信H5中唤醒高德地图app,以下是一个解决方案:
首先,在微信中无法直接通过scheme跳转协议唤醒高德地图app,但可以通过一个中间页面来间接实现。
创建一个中间页面,例如 "map.html",在该页面中添加以下代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>唤醒高德地图APP</title>
</head>
<body>
<script>
// 判断是否在微信内置浏览器中
function isWechat() {
var ua = navigator.userAgent.toLowerCase();
return ua.match(/MicroMessenger/i) === "micromessenger";
}
// 在微信中打开高德地图H5页面
function openAmapH5() {
var markerLngLat = [经度, 纬度];
var url = "https://uri.amap.com/marker?position=" + markerLngLat[0] + "," + markerLngLat[1] + "&callnative=1";
window.location.href = url;
}
// 唤醒高德地图APP
function openAmapApp() {
var markerLngLat = [经度, 纬度];
var scheme = isiOS() ? "iosamap://path" : "amapuri://route/plan";
var url = scheme + "?sourceApplication=mhc&dlat=" + markerLngLat[1] + "&dlon=" + markerLngLat[0] + "&dname=&dev=0&t=0";
window.location.href = url;
}
// 判断是否是iOS设备
function isiOS() {
var ua = navigator.userAgent.toLowerCase();
return ua.indexOf("iphone") !== -1 || ua.indexOf("ipad") !== -1;
}
// 根据设备类型选择打开方式
function openMap() {
if (isWechat()) {
openAmapH5();
} else {
openAmapApp();
}
}
openMap();
</script>
</body>
</html>
将上述代码保存为 "map.html" 文件,并将 经度
和 纬度
替换为真实的地理坐标。
在原来的代码中,将以下代码作为默认情况,即最后一个 else 语句中的代码:
window.open("map.html");
这样,在微信H5中点击触发原来的逻辑时,将跳转到中间页面 "map.html",然后该页面会根据设备类型选择打开方式,即通过H5页面或高德地图app进行唤醒。
请注意,由于使用了中间页面,可能会导致用户体验略有下降,这是因为需要点击两次才能唤醒高德地图app。以最佳的用户体验为目标,建议在微信中使用高德地图H5页面进行导航。
【相关推荐】