HTML5本身不支持地图导航，需调用高德、百度等第三方地图JS API获取点击坐标并构造对应平台的URL Scheme跳转；关键在于使用GCJ-02坐标系、按iOS/Android及App类型分别适配协议，微信内需降级为H5或wx.openLocation。
HTML5 地图点击事件如何绑定坐标跳转导航
纯 HTML5 本身不提供地图渲染或地理定位能力，所谓“HTML5 调用地图”，实际是调用第三方地图 SDK（如高德、百度、腾讯）的 JS API，在浏览器中加载地图并监听 click 事件获取经纬度，再拼接成系统原生导航链接。关键不是 HTML5，而是如何把点击坐标喂给手机导航 App。
点击地图后怎么生成可跳转的导航 URL
不同平台和 App 的 URL Scheme / Intent 协议完全不同，必须按目标 App 分别构造。常见组合如下：
- iOS 高德地图：
iosamap://navi?sourceApplication=appname&poiname=fixed&lat=39.9087&lon=116.3975&dev=1&style=2 - Android 高德地图：
androidamap://navi?sourceApplication=appname&poiname=fixed&lat=39.9087&lon=116.3975&dev=1&style=2 - 微信内置浏览器（iOS）调起腾讯地图：
qqmap://map/routeplan?type=drive&from=我的位置&to=目的地&tocoord=22.5431,113.9422 - Android 微信中调百度地图：
baidumap://map/direction?origin=nanjing&destination=beijing&mode=driving（注意：百度已限制非白名单包名调用）
⚠️ 重点：所有坐标必须是 GCJ-02 坐标系（国内加密坐标），不能直接用 WGS-84（GPS 原始坐标）。高德/腾讯地图 SDK 返回的 lng/lat 默认就是 GCJ-02；若用百度地图 SDK，则返回的是 BD-09，需先转成 GCJ-02 才能被高德/腾讯识别。
在高德地图 JS API 中监听点击并跳转的最小可行代码
以高德地图 Web JS API v2.x 为例，需先引入 SDK，再初始化地图，最后绑定 click 事件：
立即学习“前端免费学习笔记（深入）”；
const map = new AMap.Map('container', {
zoom: 13,
center: [116.3975, 39.9087]
});
map.on('click', e => {
const { lng, lat } = e.lnglat;
// 构造 iOS 高德导航链接
const url = `iosamap://navi?sourceApplication=web&poiname=目的地&lat=${lat}&lon=${lng}&dev=1&style=2`;
// 尝试打开，失败则 fallback 到网页版路线规划
const a = document.createElement('a');
a.href = url;
a.target = '_blank';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
});
⚠️ 注意点：
- 移动端 Safari 对 URL Scheme 调用拦截较严，建议加一层用户手势检测（比如必须是
click触发，不能由定时器自动触发） - Android 上需用
intent://或通过window.location.href直接赋值，但部分浏览器（如 Chrome 80+）会静默失败，无提示 - 务必检查用户设备是否已安装对应 App，否则会跳空白页或报错；可用
beforeunload+ 短延时检测页面是否卸载来粗略判断（不可靠但常用）
微信内嵌浏览器的特殊处理逻辑
微信内置浏览器禁用大部分 URL Scheme，只能走微信 JS-SDK 提供的 openLocation 接口（仅支持定位展示，不支持直接导航）或跳转到微信自带的「腾讯地图」H5 页面。真正唤起微信外的高德/百度 App 在微信里基本不可行（iOS 微信完全屏蔽，Android 需用户手动开启「外部浏览器打开」）。
所以实际策略往往是：
- 检测
UA是否含MicroMessenger - 是微信环境 → 调用
wx.openLocation展示标记点，或跳转https://apis.map.qq.com/uri/v1/routeplan?...腾讯地图 H5 导航页 - 非微信 → 按平台（iOS/Android）分别构造对应 App 的 Scheme
最常被忽略的一点：百度地图的 Web SDK 不提供直接唤起客户端导航的能力，它的 AMap.Geolocation 和 AMap.Marker 都只负责展示，唤端必须自己拼 URL —— 而且百度已对非授权域名返回 403，连 Scheme 都没机会发出去。
