前言须知第一种【自定义弹框 H5 中间页唤起地图 APP】目前这篇演示的效果实现逻辑点击位置 → wx.showActionSheet 弹出「高德、百度、腾讯」三个自定义选项 → 选择后跳转 web-view 页面 → 加载部署在业务域名下的 H5 中间页 → H5 触发对应地图的官方 Web URI → 唤起手机本地地图 APP 并定位。第二种【微信官方组件实现-导航-地图打开】实现逻辑点击位置 → 调用 wx.openLocation 打开微信内置腾讯地图 → 用户点击右下角「导航」按钮 → 微信自动扫描手机已安装的地图 APP 并弹出选择列表 → 选择后直接跳转到对应 APP 并定位。无论使用哪一种打开地图的方式打开地图不可少的参数{latitude:32.008123,longitude:118.733456,name:南京奥林匹克体育中心,//标题address:南京市建邺区江东中路222号//详细地址}有经纬度为什么还必须传 name、address经纬度 地理坐标一个 XY 点是机器分辨具体定位点name地点名称 / address地点详细地址 给人看的文字信息地图 APP 既要定位点位也要展示文字二者职责完全不一样缺一不可。一、触发微信原生底部弹框wx.showActionSheet显示「高德地图、百度地图、腾讯地图」三个选项供用户点击进入导航App二、创建h5页面【不放在小程序前端项目之中】给这文件发给后端让其放到正式域名https服务器下面的任意路径并让后端给出能访问的路径核心作用调用对应地图厂商的官方 Web URI 协议触发手机本地地图 APP 的唤起同时处理未安装 APP 的兜底逻辑跳转到网页版。后端帮我放到服务器后台管理项目的访问路径下无论放在服务器哪个位置能浏览器能直接访问不需要登录也行)https://drhearing.natapp4.cc/applets/map-jump.html证明一件事后端部署这个h5页面成功了模拟传参给该路径直接能打开网页地图https://ditu.amap.com/regeo?lng118.78lat32.041name%E6%B5%8B%E8%AF%95src%E6%B5%B7%E4%B9%8B%E5%A3%B0callnative1innersrcuriapi证明一件事这个h5文件内的代码逻辑没错通过接收路由地址栏的传参能对应打开网页或手机对应地图App三、创建web-view页面【放在小程序前端项目之中】微信小程序是封闭沙箱环境官方没有提供任何原生 API 可以直接唤起手机上的第三方 APP。在第二步的时候创建的h5页面就是去唤起手机内第三方地图App所以我们在小程序之中需要访问上一步的h5页面从而实现真正意义上微信小程序-选中地图-打开手机地图app的完整闭环微信出于生态闭环和安全考虑严格禁止小程序直接跳转到外部应用所有外部跳转必须通过 web-view 网页容器间接完成完整流通逻辑1.点击选中对应地图将地图经纬度、name、address、地图信息进行路由跳转传递给web-view组件2. web-view组件接收地图信息参数3 web-view加载h5页面并传递地图参数3. h5页面接收地图参数直接通过h5内写的代码逻辑执行真正意义跳转打开对应的地图app因为h5页面才是真正执行打开地图App动作的地方所以此页面同时可以处理兜底与异常处理的对应操作…末如果故事到这结束了该多美好最后【反面教材的解说】以上三步在本地真机模式下去掉校验可信域名可以直接弹框选择地图打开对应的网页端地图网页端跳转app的方式直接失效之前在浏览器测试h5代码没问题可惜小程序拦截不给你进行web-view直接唤起app一开始我就问过是否可以按照官方的做法客户嫌弃官方的这个不便捷无法一次性选择地图进行跳转所以没采纳给客户的说辞微信小程序平台限制无法像 APP 或网页那样直接唤起指定地图 APP。最终是通过微信内置地图的导航功能让用户自己选择已安装的地图 APP。这是所有小程序的标准做法2026-08-13 补充后续—有解决办法函数方式解决办法 微信小程序中实现【自定义弹框 + H5 中间页唤起地图 APP】反面教材
前言须知第一种【自定义弹框 H5 中间页唤起地图 APP】目前这篇演示的效果实现逻辑点击位置 → wx.showActionSheet 弹出「高德、百度、腾讯」三个自定义选项 → 选择后跳转 web-view 页面 → 加载部署在业务域名下的 H5 中间页 → H5 触发对应地图的官方 Web URI → 唤起手机本地地图 APP 并定位。第二种【微信官方组件实现-导航-地图打开】实现逻辑点击位置 → 调用 wx.openLocation 打开微信内置腾讯地图 → 用户点击右下角「导航」按钮 → 微信自动扫描手机已安装的地图 APP 并弹出选择列表 → 选择后直接跳转到对应 APP 并定位。无论使用哪一种打开地图的方式打开地图不可少的参数{latitude:32.008123,longitude:118.733456,name:南京奥林匹克体育中心,//标题address:南京市建邺区江东中路222号//详细地址}有经纬度为什么还必须传 name、address经纬度 地理坐标一个 XY 点是机器分辨具体定位点name地点名称 / address地点详细地址 给人看的文字信息地图 APP 既要定位点位也要展示文字二者职责完全不一样缺一不可。一、触发微信原生底部弹框wx.showActionSheet显示「高德地图、百度地图、腾讯地图」三个选项供用户点击进入导航App二、创建h5页面【不放在小程序前端项目之中】给这文件发给后端让其放到正式域名https服务器下面的任意路径并让后端给出能访问的路径核心作用调用对应地图厂商的官方 Web URI 协议触发手机本地地图 APP 的唤起同时处理未安装 APP 的兜底逻辑跳转到网页版。后端帮我放到服务器后台管理项目的访问路径下无论放在服务器哪个位置能浏览器能直接访问不需要登录也行)https://drhearing.natapp4.cc/applets/map-jump.html证明一件事后端部署这个h5页面成功了模拟传参给该路径直接能打开网页地图https://ditu.amap.com/regeo?lng118.78lat32.041name%E6%B5%8B%E8%AF%95src%E6%B5%B7%E4%B9%8B%E5%A3%B0callnative1innersrcuriapi证明一件事这个h5文件内的代码逻辑没错通过接收路由地址栏的传参能对应打开网页或手机对应地图App三、创建web-view页面【放在小程序前端项目之中】微信小程序是封闭沙箱环境官方没有提供任何原生 API 可以直接唤起手机上的第三方 APP。在第二步的时候创建的h5页面就是去唤起手机内第三方地图App所以我们在小程序之中需要访问上一步的h5页面从而实现真正意义上微信小程序-选中地图-打开手机地图app的完整闭环微信出于生态闭环和安全考虑严格禁止小程序直接跳转到外部应用所有外部跳转必须通过 web-view 网页容器间接完成完整流通逻辑1.点击选中对应地图将地图经纬度、name、address、地图信息进行路由跳转传递给web-view组件2. web-view组件接收地图信息参数3 web-view加载h5页面并传递地图参数3. h5页面接收地图参数直接通过h5内写的代码逻辑执行真正意义跳转打开对应的地图app因为h5页面才是真正执行打开地图App动作的地方所以此页面同时可以处理兜底与异常处理的对应操作…末如果故事到这结束了该多美好最后【反面教材的解说】以上三步在本地真机模式下去掉校验可信域名可以直接弹框选择地图打开对应的网页端地图网页端跳转app的方式直接失效之前在浏览器测试h5代码没问题可惜小程序拦截不给你进行web-view直接唤起app一开始我就问过是否可以按照官方的做法客户嫌弃官方的这个不便捷无法一次性选择地图进行跳转所以没采纳给客户的说辞微信小程序平台限制无法像 APP 或网页那样直接唤起指定地图 APP。最终是通过微信内置地图的导航功能让用户自己选择已安装的地图 APP。这是所有小程序的标准做法2026-08-13 补充后续—有解决办法函数方式解决办法 RELATED READING
延伸阅读
更多一线实战笔记与深度复盘，助您持续精进
