uni-app调用百度地图API uni-app实现地图选点与导航功能

煙雲

煙雲

2026-05-12

1036人浏览

原创

不能。百度地图js api仅支持标准浏览器环境,而uni-app的app端运行于webview或原生渲染层、小程序端禁用document/window等api,直接引入会报错或白屏;app端须用原生插件(如uni-baidu-map)并配置自定义基座,小程序端只能使用微信内置地图(腾讯地图),h5端仅能跳转百度地图网页版链接。

uni-app调用百度地图api uni-app实现地图选点与导航功能

uni-app 中无法直接调用百度地图 JS API?

不能。百度地图 JS API 明确不支持非浏览器环境,而 uni-app 的 App 端(iOS/Android)运行在 WebView 或原生渲染层,并非标准浏览器上下文;微信小程序端更受平台限制,documentwindowscript 动态加载等能力被禁用,直接引入 https://api.map.baidu.com/api?v=3.0&ak=xxx 会报 ReferenceError: window is not defined 或白屏无响应。

App 端选点必须用原生插件而非 JS SDK

uni-app 官方推荐且实际可行的方案是使用封装好的原生地图插件,比如 DCloud 官方维护的 uni-app-map(已下架),或社区主流选择:uni-baidu-map(仅 App 端)和 uni-app-x 生态下的高德/腾讯替代方案。但注意:uni-baidu-map 并非百度官方出品,而是基于 Android/iOS 原生 SDK 封装:

  • 需在 manifest.json 中配置百度 AK(Android 包名、iOS Bundle ID 必须与百度开发者后台一致)
  • 调用 uni.chooseLocation 时传入 provider: 'baidu',否则默认走微信或系统地图
  • App 端真机调试必须开启“自定义基座”,普通云打包不包含百度 SDK
  • 返回坐标是百度坐标系(BD09),若后续要叠加百度 POI 检索或路线规划,必须保持坐标系一致,切勿混用 WGS84 或 GCJ02

微信小程序端只能用腾讯地图或系统地图

微信小程序强制使用 wx.chooseLocation,它底层调用的是微信内置地图(实为腾讯地图),不接受第三方地图 provider 参数。即使你在 uni-app 中写 provider: 'baidu',小程序端也会静默忽略并回退到默认行为。这意味着:

百度一镜
百度一镜

百度一镜是百度电商数字人直播平台,可用于数字人直播间创建、互动配置、直播脚本和AI工具使用。

下载
  • 你无法在小程序里显示百度地图界面或使用百度 POI 搜索
  • wx.chooseLocation 返回的坐标是 GCJ02(火星坐标),不是 BD09,也不支持转成 BD09 的官方接口
  • 若需跨端统一导航逻辑,建议后端统一做坐标系转换,或前端用开源库如 coordtransform 做近似纠偏(精度损失约 10–50 米)
  • 调起微信内驾车导航:用 wx.openLocation,传 scalename 即可,无需额外 SDK

uni-app 导航跳转要分端处理

没有“一次写完、三端通用”的导航调用。各端唤起方式完全不同:

  • App 端(百度地图):uni.openLocation({ latitude, longitude, name, address, provider: 'baidu' }) —— 仅当使用 uni-baidu-map 插件且自定义基座生效时才有效
  • 微信小程序:wx.openLocation({ latitude, longitude, scale: 18, name, address }) —— 必须用 wx. 前缀,uni.openLocation 在小程序里实际就是它
  • H5 端:只能跳转百度地图网页版链接,例如 https://map.baidu.com/?latlng=${lat},${lng}&title=${encodeURIComponent(name)},不支持直接唤起手机百度 App(iOS 限制、Android 无通用 scheme)
  • 注意 latitude/longitude 类型必须是 number,字符串会导致 H5 白屏、App 端静默失败

最易被忽略的一点:百度地图原生 SDK 要求 iOS 端在 info.plist 中声明 NSLocationWhenInUseUsageDescription,否则定位失败且无提示;Android 端需在 AndroidManifest.xml 中添加位置权限及百度服务声明——这些不在 uni-app 配置面板里,得手动改原生工程。

大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!

相关文章

百度地图
百度地图

百度地图作为新一代人工智能地图,服务覆盖全球200+城市及国家。导航可信赖、语音交互更简单、数据丰富更贴心的百度地图,致力于为用户提供更准确、更丰富、更易用的出行服务。有需要的小伙伴快来保存下载体验吧!

下载

相关标签:

百度 百度地图 uni-app

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

相关专题

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

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

2023.08.11

1111

5

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

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

2023.10.09

2283

6

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

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

2024.03.19

2154

13

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

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

2024.03.22

2344

10

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

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

2024.05.22

336

5

ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2023.06.14

1144

4

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.31

320

5

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.11.15

1039

5

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.09.24

919

6

热门下载

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

精品课程

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

共0课时 | 0人学习

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

共0课时 | 0人学习

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

共0课时 | 0人学习