收藏
回答

请问如何在微信公众号网页内跳转高德导航?

开发了一个微信公众号网页,其中有导航的功能需要跳转到高德导航APP进行导航,在浏览器里可以唤起,但是在微信内无法唤起,请问是有什么限制吗,如果有限制的情况下 是否有其他解决方案呢

const handleNavigate = () => {
  // 定义经纬度
  const latitude = 34.24;
  const longitude = 111.11;

  // 获取用户代理判断设备类型
  const userAgent = navigator.userAgent.toLowerCase();
  const isIOS = /iphone|ipad|ipod/.test(userAgent);
  const isAndroid = userAgent.indexOf('android') > -1;

  // 构建高德导航URL scheme
  let mapUrl = '';

  if (isIOS) {
    // iOS高德地图URL scheme
    mapUrl = `iosamap://navi?sourceApplication=appName&lat=${latitude}&lon=${longitude}&dev=0&style=2`;
  } else if (isAndroid) {
    // Android高德地图URL scheme
    mapUrl = `androidamap://navi?sourceApplication=appName&lat=${latitude}&lon=${longitude}&dev=0&style=2`;
  } else {
    // 其他设备fallback到web版
    mapUrl = `https://uri.amap.com/navigation?to=${longitude},${latitude},目的地&mode=car&callnative=1`;
  }

  // 尝试打开原生应用
  window.location.href = mapUrl;

  // 设置一个超时,如果没能成功唤起应用,显示提示
  const timeout = setTimeout(() => {
    // 如果页面仍然存在(没有跳转成功),则提示用户
    uni.showModal({
      title: '打开失败',
      content: '未能打开高德地图应用,请确保已安装高德地图或手动打开并输入坐标进行导航',
      confirmText: '复制坐标',
      success: (res) => {
        if (res.confirm) {
          uni.setClipboardData({
            data: `${longitude},${latitude}`,
            success: function () {
              uni.showToast({
                title: '坐标已复制',
                icon: 'none'
              });
            }
          });
        }
      }
    });
  }, 2000);

  // 如果页面隐藏了(说明跳转成功),清除超时
  document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
      clearTimeout(timeout);
    }
  });
}
回答关注问题邀请回答
收藏

3 个回答

登录 后发表内容