如何创建安卓端打开Google Maps、iOS端打开Apple Maps的超链接？

注：Media Queries仅用于匹配设备屏幕、特性等样式规则，无法完成User Agent检测及跳转逻辑的实现，以下为JS原生实现方案

步骤1：基础页面元素 #

先在页面中放置地图跳转入口：

<a href="javascript:void(0)" id="mapJumpBtn">打开导航</a>

步骤2：UA检测+跳转逻辑实现 #

document.getElementById('mapJumpBtn').addEventListener('click', function() {
  // 替换为你要跳转的目标位置坐标/地址，坐标格式为「纬度,经度」
  const targetPos = '39.9042,116.4074'
  const userAgent = navigator.userAgent.toLowerCase()

  if (/iphone|ipad|ipod|ios/.test(userAgent)) {
    // iOS设备跳转Apple Maps
    window.location.href = `https://maps.apple.com/?q=${targetPos}`
  } else if (/android/.test(userAgent)) {
    // 安卓设备跳转Google Maps
    window.location.href = `https://www.google.com/maps/search/?api=1&query=${targetPos}`
  } else {
    // 桌面端/其他设备 fallback 逻辑，可根据需求自行修改
    alert('请使用移动端设备打开导航')
  }
})

可选优化 #

• 如果要支持国内安卓设备跳转高德/百度地图，可在安卓分支下额外新增国内厂商UA匹配逻辑，跳转对应地图的scheme链接
• 若不想用JS动态判断，也可以在服务端通过请求头的User-Agent字段直接渲染对应平台的地图链接，减少前端逻辑

内容的提问来源于stack exchange，提问作者FerdTurgusen