uni-app实现点击查看地图路线 uni-app调用第三方地图APP

夜杰酱_8559

夜杰酱_8559

2026-05-10

1272人浏览

原创

uni.openLocation仅支持单点定位,不支持路线规划;查路线需手动构造高德、百度、腾讯等地图的URL Scheme/Intent,并处理平台差异、坐标系转换及安装检测。

uni-app实现点击查看地图路线 uni-app调用第三方地图app

uni-app里怎么跳转到第三方地图APP查看路线

直接调用系统默认地图或指定第三方地图(如高德、百度、腾讯)查看路线,uni-app 本身不提供原生路线规划能力,必须借助 uni.openLocation 或拼接 URL Scheme / Intent 跳转。关键在于:**目标地图是否已安装 + 是否支持标准参数格式**。

最稳妥的方式是优先用 uni.openLocation,它会自动唤起系统默认地图;若需强制指定某款地图(比如用户手机装了高德但系统默认是苹果地图),就得手动构造跳转链接,此时要按各地图文档要求传参,稍有偏差就失败。

uni.openLocation 能不能指定高德/百度查路线

不能。uni.openLocation 只支持「打开一个坐标点」,不支持起点+终点+路径规划。它的参数只有 latitude、longitude、name、address,本质是“标记一个点”,不是“画一条线”。

如果你传了两个坐标想让它画路线,它只会打开第一个点——这是常见误解。

  • 想查路线,必须用第三方地图的 SDK 或 URL Scheme
  • uni.openLocation 适合“附近门店定位”这类单点场景
  • 它在 iOS 和 Android 行为一致,兼容性好,但功能受限

手动跳转高德/百度地图查路线的正确写法

核心是构造合法的 URL Scheme(iOS)或 Intent URL(Android),并用 uni.getSystemInfoSync().platform 做平台判断。注意:URL 参数必须 URL 编码,坐标必须是小数格式(不能带空格或中文逗号),且高德、百度对起点/终点字段命名完全不同。

uni-app
uni-app

uni-app 是基于 Vue 的跨端开发框架,适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

示例:从当前定位到某门店查驾车路线

const lat = 39.9087;
const lng = 116.3975;
const name = '某某大厦';
const address = '北京市朝阳区xxx';

// 高德:amapuri://
const amapUrl = `amapuri://route/plan?sourceApplication=uniapp&slat=${lat}&slon=${lng}&dlat=${lat}&dlon=${lng}&dname=${encodeURIComponent(name)}&dev=0&m=0`;

// 百度:baidumap://
const baiduUrl = `baidumap://map/direction?origin=latlng:${lat},${lng}|name:我的位置&destination=latlng:${lat},${lng}|name:${encodeURIComponent(name)}&mode=driving`;

// 腾讯:qqmap://
const qqUrl = `qqmap://map/routeplan?from=我的位置&fromcoord=${lat},${lng}&to=${encodeURIComponent(name)}&tocoord=${lat},${lng}&policy=0&type=drive`;

// 实际使用时需先 try/catch + 判断 scheme 是否能打开
uni.navigateTo({
  url: `...` // 根据平台选上面某条
});
  • 高德的 dev=0 表示不走高速,m=0 表示驾车;slat/slon 是起点,dlat/dlon 是终点
  • 百度必须用 latlng:纬度,经度 格式,顺序是「纬度在前」,和 GeoJSON 一致,但和高德相反(高德是 lon,lat)
  • 腾讯地图的 policy=0 是推荐路线,type=drive 是驾车,不传可能默认步行
  • 所有参数值必须 encodeURIComponent,否则含中文或符号时跳转会失败

跳转失败的三个高频原因

不是代码写错,而是环境或参数细节没对上:

  • iOS 上高德 URL Scheme 失效?检查是否在 info.plist 里加了 LSApplicationQueriesSchemes 并包含 amapuri
  • Android 打不开百度地图?确认手机装的是「百度地图」官方版(非极速版、Lite 版),后者不支持 URL Scheme
  • 坐标传进去显示“位置错误”?检查经纬度是 WGS84 坐标系(uni-app 获取的 uni.getLocation 默认就是),高德/腾讯接受,但百度需要 BD09,得先用 uni.convertLocation 转换

真正麻烦的从来不是写几行跳转代码,而是每款地图的参数规则、坐标系、安装状态、iOS/Android 差异全得兜住——漏掉任意一环,用户点下去就静默失败。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

uni-app

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2883

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

6263

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

7190

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

7018

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

1003

5

Postman身份认证怎么配置
Postman身份认证怎么配置

本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

2026.11.06

0

12

Postman请求头Headers怎么设置
Postman请求头Headers怎么设置

围绕Postman HTTP请求头配置展开,讲解Headers选项的具体使用方式,包括Key和Value参数填写、请求头信息添加、常见Header字段设置及请求头修改方法,帮助用户解决接口调试过程中遇到的请求头配置问题。

2026.11.06

0

13

Postman接口请求发送教程
Postman接口请求发送教程

详细介绍Postman接口请求的创建与发送方法,涵盖GET和POST请求、URL配置、请求参数、Headers请求头、Body请求体设置以及响应结果查看,帮助用户掌握Postman接口请求的完整操作流程。

2026.11.06

0

10

DBeaver怎么导入数据
DBeaver怎么导入数据

DBeaver数据导入专题,整理Excel、CSV、SQL、TXT等常见文件的数据导入方法,涵盖目标数据库选择、数据表创建、字段映射、数据类型设置及导入参数配置等操作,帮助用户将本地文件中的数据写入数据库,并了解批量导入、重复数据处理和导入失败等常见问题的解决方法。

2026.11.05

20

12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app从入门到实战教程
uni-app从入门到实战教程

共0课时 | 0人学习

uni-app x harmony开发指南
uni-app x harmony开发指南

共0课时 | 0人学习

uni-app鸿蒙运行和发行
uni-app鸿蒙运行和发行

共0课时 | 0人学习