在微信H5中怎样唤醒高德地图app

  1. 用手机自带浏览器时,可以正常唤醒高德app。但是在微信中执行没有任何反应
  2. 原因是 微信不支持“scheme 跳转协议”
  3. 目前想到的解决办法:在微信中通过高德官方链接去打开一个地址,但是这样会先跳转到另一个H5页面,体验不是很好
  4. 以下是代码
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,以下是一个解决方案:

  1. 首先,在微信中无法直接通过scheme跳转协议唤醒高德地图app,但可以通过一个中间页面来间接实现。

  2. 创建一个中间页面,例如 "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>
  1. 将上述代码保存为 "map.html" 文件,并将 经度纬度 替换为真实的地理坐标。

  2. 在原来的代码中,将以下代码作为默认情况,即最后一个 else 语句中的代码:

window.open("map.html");

这样,在微信H5中点击触发原来的逻辑时,将跳转到中间页面 "map.html",然后该页面会根据设备类型选择打开方式,即通过H5页面或高德地图app进行唤醒。

请注意,由于使用了中间页面,可能会导致用户体验略有下降,这是因为需要点击两次才能唤醒高德地图app。以最佳的用户体验为目标,建议在微信中使用高德地图H5页面进行导航。



【相关推荐】



如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^