有个做本地服务的客户上周改网站，在联系我们页面贴了公司地址"南通市崇川区南大街XX号XX楼"，纯文字，用户得手动复制地址、打开地图APP、粘贴、搜索——四个步骤才能开始导航。他问我能不能让用户点一下地址就直接跳到地图导航。我说能，而且不用任何JS框架，不用调API，纯HTML就能搞定。他听完感叹："这么简单的事我竟然让用户手动复制了两年地址。"
把导航地址做成可点击的链接，确实简单到很多人不敢相信。核心原理就一个：地图APP都支持URL Scheme协议，浏览器里点一个特定格式的链接，系统会自动唤起对应的地图应用。你要做的就是把地址拼进这个URL里，然后用a标签包起来。但"拼进URL"这一步有很多细节——不同地图的协议格式不一样、微信内置浏览器有特殊限制、iOS和安卓的行为也不同。下面把几种主流方案和完整代码拆开讲。
导航链接生成的7种方法总览
| 1 | 百度地图URI Scheme拼参数（无需Key，地址栏直接拼，最常用） |
| 2 | 高德地图URI Scheme拼参数（无需Key，支持直接传地址文字） |
| 3 | 腾讯地图URI Scheme拼参数（无需Key，微信小程序环境首选） |
| 4 | Apple Maps通用链接（无需Key，iOS设备直接跳转苹果地图） |
| 5 | 百度地图JavaScript API生成（需Key，功能最强，可嵌入网页内嵌地图） |
| 6 | 高德地图JS API生成（需Key，支持路线规划和多点导航） |
| 7 | 腾讯地图JavaScript API生成（需Key，微信生态兼容性最好） |
一、核心原理：URL Scheme协议是怎么唤起地图APP的
普通网页链接以http://或https://开头，浏览器解析后会直接打开网页。而地图APP注册了自己专属的URL协议头：百度地图注册了baidumap://，高德地图注册了iosamap://和androidamap://，腾讯地图注册了qqmap://，苹果地图则通过http://maps.apple.com/这个标准HTTPS链接跳转。
当浏览器尝试打开baidumap://开头的链接时，操作系统会检查本地是否安装了能处理这个协议的APP。装了百度地图→直接打开百度地图并跳转到指定位置。没装→根据系统不同，iOS会弹出一个"无法打开此链接"的提示，安卓部分浏览器会自动跳转到应用商店下载页。这就是为什么同一个导航链接在不同手机上行为不同，做的时候要考虑兼容性。
URL Scheme导航链接的基本格式
协议头://功能路径?参数1=值1&参数2=值2
协议头：告诉操作系统"这个链接由哪个APP处理"（baidumap:// / iosamap:// / qqmap://）
功能路径：告诉APP要做什么（/map/direction 是导航，/map/marker 是标记地点）
参数：具体数据（目的地坐标、地址名称、导航模式等），多个参数用&连接
二、方法1：百度地图导航链接（最常用，无需Key）
百度地图的URI Scheme支持两种方式传目的地：用GPS坐标和用地址名称。推荐用坐标，因为地址名称可能在地图数据库里返回多个匹配结果（比如"万达广场"南通有好几个），坐标是唯一确定的。
<!-- 方式A：用坐标导航，origin是起点（可选留空），destination是终点坐标 --><a href="baidumap://map/direction?destination=31.968,120.861&coord_type=bd09ll&mode=driving">百度地图导航到公司</a><!-- 方式B：用地址名导航，百度会自动搜索匹配 --><a href="baidumap://map/direction?destination=南通市崇川区南大街188号&mode=driving">百度地图导航到公司</a><!-- 方式C：只在地图上标记位置，不启动导航 --><a href="baidumap://map/marker?location=31.968,120.861&title=南通万达广场&content=3楼">在百度地图上查看公司位置</a>百度地图坐标必须是BD09坐标系，GPS原始坐标会偏差几百米
百度地图用的不是GPS原始坐标（WGS84），也不是高德/腾讯用的火星坐标（GCJ02），而是自己加密过的BD09坐标系。如果你从GPS设备拿到的坐标直接填进去，定位会偏到隔壁街道。获取BD09坐标的方法：打开百度地图网页版（map.baidu.com），搜索你的地址，在地图上右键点击目标位置选择"这是哪里"，弹窗里显示的经纬度就是BD09坐标，直接复制使用。
三、方法2：高德地图导航链接（支持直接传地址文字）
高德地图的导航链接最大的好处是对地址文字的容错性很高。你不需要事先查坐标，直接把"南通市崇川区南大街XX号XX楼"传到参数里，高德会自动解析和匹配位置。而且高德同时提供了原生URI Scheme和网页跳转两种方式，网页跳转方式兼容性更好。
<!-- 方式A：高德网页跳转（推荐，iOS和Android通用，兼容性最好） --><a href="https://uri.amap.com/navigation?to=120.861,31.968,南通万达广场&mode=car&callnative=1">高德地图导航到公司</a><!-- 方式B：高德原生URI Scheme，iOS专用 --><a href="iosamap://path?sourceApplication=myapp&dname=南通万达广场&dlat=31.968&dlon=120.861&dev=0&t=0">高德地图导航到公司（iOS）</a><!-- 方式C：高德原生URI Scheme，Android专用 --><a href="androidamap://navi?sourceApplication=myapp&lat=31.968&lon=120.861&dev=0&style=2">高德地图导航到公司（Android）</a>三种写法里，推荐用方式A（https://uri.amap.com/navigation）。原因：它是标准HTTPS链接，即使在电脑上点击也不会报错（会打开高德网页版地图），而原生URI Scheme（iosamap://和androidamap://）在电脑上点击会提示"无法识别此协议"。如果你不想做平台判断逻辑，直接用方式A一个链接搞定。
四、方法3：腾讯地图导航链接（微信环境首选）
如果你的客户主要通过微信公众号或微信联系你，腾讯地图链接是必做的。因为微信内置浏览器对qqmap://协议的支持最好——用户在微信里点开你的网站，点击腾讯地图导航链接，微信会直接调用内置的腾讯地图服务，不需要跳出微信去打开外部APP。这个体验差距非常大。
<!-- 方式A：用坐标导航到目的地 --><a href="qqmap://map/routeplan?type=drive&to=南通万达广场&tocoord=31.968,120.861">腾讯地图导航到公司</a><!-- 方式B：只标记地点，不启动导航 --><a href="qqmap://map/marker?marker=coord:31.968,120.861;title:南通万达广场;addr:南大街188号3楼">在腾讯地图上查看公司位置</a>腾讯地图使用的坐标系统是GCJ02（火星坐标），和高德一样。如果你之前用的是百度地图的BD09坐标，不能直接填进腾讯地图的链接里，需要做一次坐标转换，否则偏差大概在几十到几百米之间。
五、方法4：Apple Maps通用链接（iOS设备自动跳转苹果地图）
苹果地图没有自己的URI Scheme协议头，但它支持通过标准HTTPS链接（http://maps.apple.com/）来跳转。iOS设备点击这个链接会自动打开苹果地图，macOS上会打开地图APP，Windows上会打开苹果地图网页版。不需要任何Key，直接用。
<!-- 苹果地图导航链接，iOS设备自动打开苹果地图 --><a href="http://maps.apple.com/?q=南通市崇川区南大街188号&z=16">iPhone用户点这里用苹果地图导航</a><!-- 带方向导航，指定终点坐标 --><a href="http://maps.apple.com/?daddr=31.968,120.861&dirflg=d">iPhone用户点这里用苹果地图导航到公司</a>参数说明：q=后面跟地址或地名（苹果地图会自动搜索），daddr=后面跟终点坐标，dirflg=d表示驾车导航（w是步行，r是公交），z=16是地图缩放级别。苹果地图用的是WGS84坐标系（GPS原始坐标），和高德/腾讯的GCJ02、百度的BD09都不一样，坐标需要转换。
六、实战：做一个"一键导航"按钮，自动适配不同平台
只放一个地图链接的问题是：用户可能没装这个地图APP。比如你只放了百度地图链接，iPhone用户点进去发现没装百度地图，就卡住了。更好的做法是做一个小型导航选择面板，让用户自己选用哪个地图导航。
<div style="background: #f8fafc; border-radius: 10px; padding: 20px; text-align: center; margin: 20px 0;"><h4 style="margin: 0 0 16px; color: #1a1a2e;">选择地图导航到公司</h4><p style="font-size: 13px; color: #888; margin: 0 0 16px;">南通市崇川区南大街188号万达广场3楼</p><div style="display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;"><a href="baidumap://map/direction?destination=31.968,120.861&coord_type=bd09ll&mode=driving"style="background: #3385ff; color: white; padding: 10px 20px; border-radius: 6px; text-decoration: none; font-size: 14px;">百度地图</a><a href="https://uri.amap.com/navigation?to=120.861,31.968,公司地址&mode=car"style="background: #0bb474; color: white; padding: 10px 20px; border-radius: 6px; text-decoration: none; font-size: 14px;">高德地图</a><a href="qqmap://map/routeplan?type=drive&to=公司地址&tocoord=31.968,120.861"style="background: #07c160; color: white; padding: 10px 20px; border-radius: 6px; text-decoration: none; font-size: 14px;">腾讯地图</a><a href="http://maps.apple.com/?q=南通市崇川区南大街188号"style="background: #007aff; color: white; padding: 10px 20px; border-radius: 6px; text-decoration: none; font-size: 14px;">苹果地图</a></div><p style="font-size: 12px; color: #aaa; margin: 12px 0 0;">点击按钮后手机将自动打开对应的地图APP</p></div>这段代码直接复制到你的网站HTML里就能用，把地址和坐标换成你自己的就行。效果是四个彩色按钮，用户根据自己的手机情况点一个就行。如果你只想要一个链接而不是四个按钮，也可以用一小段JS自动判断平台，根据用户的设备类型自动选择最合适的地图：
<script>function openNavigation() {var ua = navigator.userAgent;var address = '南通市崇川区南大街188号';var gcjLat = '31.968';var gcjLng = '120.861';// 判断是否在微信中if (ua.indexOf('MicroMessenger') !== -1) {// 微信环境：用腾讯地图window.location.href = 'qqmap://map/routeplan?type=drive&to='+ encodeURIComponent(address) + '&tocoord=' + gcjLat + ',' + gcjLng;}// 判断是否是iPhoneelse if (ua.indexOf('iPhone') !== -1 || ua.indexOf('iPad') !== -1) {// iPhone：优先苹果地图，备选高德window.location.href = 'http://maps.apple.com/?q=' + encodeURIComponent(address);}// Android或其他else {// Android：用高德网页跳转，兼容性最好window.location.href = 'https://uri.amap.com/navigation?to='+ gcjLng + ',' + gcjLat + ',' + encodeURIComponent(address) + '&mode=car';}}</script><a href="javascript:openNavigation();" style="color: #2563eb; text-decoration: underline;">点这里一键导航到公司（自动适配地图）</a>七、三个容易踩坑的细节
坐标体系不统一
百度用BD09，高德和腾讯用GCJ02，苹果用WGS84。同一组GPS坐标不能直接填进所有地图链接。做多个地图的链接时，需要提前转换好各自的坐标值，分别填入。
微信内置浏览器对URI Scheme有限制
微信内置浏览器在iOS端会拦截部分第三方APP的URI Scheme跳转（尤其是百度地图和高德地图），但qqmap://（腾讯地图）和http://maps.apple.com/（苹果地图）不受限制。微信场景下优先用这两个。
电脑端点击会失效
URI Scheme导航链接在PC上点击无效，因为电脑没装地图APP。建议在网页上用CSS媒体查询或JS判断，手机端显示导航按钮，电脑端显示一个静态地图图片或二维码。
关于坐标获取，很多人不知道怎么拿到自己公司地址的准确坐标。其实不需要任何工具：打开百度地图网页版（map.baidu.com），搜索你的公司地址，在地图上找到正确位置后右键点击那个位置，选择"这是哪里"，弹窗里显示的经纬度就是BD09坐标。如果需要高德/腾讯用的GCJ02坐标，打开高德地图网页版（amap.com），同样的操作，右键→"这是哪里"即可。
| 坐标系 | 使用方 | 如何获取 | 注意事项 |
|---|---|---|---|
| WGS84 | GPS原始坐标、苹果地图 | GPS设备直接输出、Google Maps网页版右键 | 不能直接填入百度/高德/腾讯链接 |
| GCJ02（火星坐标） | 高德地图、腾讯地图 | 高德地图网页版右键"这是哪里" | 国内法规要求的标准坐标系 |
| BD09 | 百度地图 | 百度地图网页版右键"这是哪里" | 百度在GCJ02基础上二次加密 |
如果你用的是WordPress或UC建站系统这类后台管理系统，可以把导航链接做成一个自定义设置项：在后台输入公司地址和经纬度，前端模板自动拼接生成百度、高德、腾讯、苹果四套导航链接。这样以后公司搬家了，后台改一次地址，网站上所有导航按钮自动更新，不用一个一个页面改代码。UC建站系统的内容中台可以把这个逻辑做成一个全局组件，所有站点统一调用，配合多站看板监控各站的联系我们页面是否正常工作，比手动维护十几个站的地址信息省心多了。
说到底，把导航地址做成链接这件事，技术门槛几乎为零，就是一个a标签加一段URI Scheme字符串。真正卡住大部分人的不是技术，是不知道地图APP还支持这种用法。知道以后，五分钟就能搞定——打开地图网页版找到坐标，拼进链接模板，复制到网页代码里，完事。你的客户点一下就能开始导航，比手动复制地址搜索快了至少三个步骤，这个体验差距远比网站多一个动效、多一张轮播图重要得多。
