忍冬 ⁡⁡ 2023-08-25 15:35 采纳率: 50%
浏览 14

在微信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`
  }
  • 写回答

1条回答 默认 最新

  • CSDN-Ada助手 CSDN-AI 官方账号 2023-08-25 19:46
    关注

    【以下回答由 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页面进行导航。



    【相关推荐】



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

报告相同问题?

问题事件

  • 修改了问题 8月25日
  • 创建了问题 8月25日

悬赏问题

  • ¥15 基于卷积神经网络的声纹识别
  • ¥15 Python中的request,如何使用ssr节点,通过代理requests网页。本人在泰国,需要用大陆ip才能玩网页游戏,合法合规。
  • ¥100 为什么这个恒流源电路不能恒流?
  • ¥15 有偿求跨组件数据流路径图
  • ¥15 写一个方法checkPerson,入参实体类Person,出参布尔值
  • ¥15 我想咨询一下路面纹理三维点云数据处理的一些问题,上传的坐标文件里是怎么对无序点进行编号的,以及xy坐标在处理的时候是进行整体模型分片处理的吗
  • ¥15 CSAPPattacklab
  • ¥15 一直显示正在等待HID—ISP
  • ¥15 Python turtle 画图
  • ¥15 stm32开发clion时遇到的编译问题