uni-app 中百度地图搜索与路径规划必须用适配插件,搜索与规划需分开调用,三端配置、坐标系转换及 polyline 格式差异是关键痛点。

直接说结论:uni-app 里做百度地图的位置搜索与路径规划,不能靠原生 <map> 组件硬扛,必须用插件;而「搜地点 + 规划路线」这俩功能,得分开调用——搜索走百度 SDK 的 LocalSearch 或 PlaceSearch,规划走 DrivingRoute / WalkingRoute,且 H5、小程序、App 三端的调用方式和参数差异极大,不处理好就会白屏或报错 undefined is not a function。
uni-baidu-map 插件怎么装才不踩坑
别 npm install vue-baidu-map ——它依赖 DOM 操作,uni-app 的 nvue 页面和小程序环境根本不认。必须用 uni-app 官方生态适配的插件:
- 推荐安装
@dcloudio/uni-plugin-baidu-map(HBuilderX 3.9+ 内置支持,manifest.json 配置后自动注入) - 若用旧版 HBuilderX 或需更细粒度控制,改用插件市场里的
uni-baidu-map(注意看更新时间,选 2025 年后维护的版本) - 安装后务必在
manifest.json的对应平台节点下填上 AK:"mp-weixin"下加"appid"字段,"android"和"ios"下分别配置"baidumap-key",三端 AK 必须分开申请(web 端用 SN 加密,移动端用包名+签名 SHA1)
位置搜索为什么总返回空结果
常见现象是调用 search() 后 result 为空数组,或只返回“北京市”这种泛泛结果。根本原因不是代码写错,而是:
- 没传
region(城市名或坐标范围),百度默认全国搜,精度极低;正确做法是先用uni.getLocation拿到当前坐标,再用new BMapGL.Point(lng, lat)构造中心点,传给LocalSearch的bounds参数 - 关键词用了中文标点或空格,比如
"咖啡厅 "末尾有空格,百度会当无效词过滤;建议.trim()后再传 - H5 环境下若未开启 HTTPS,百度地图 JS API 会静默拒绝请求,控制台无报错但 network 面板能看到 403;小程序和 App 不受此限
路径规划在小程序里为啥不画线
你写了 drivingRoute.search(start, end),控制台打印出路线数据了,但地图上就是没 polyline —— 这是因为小程序端的 <map> 组件不支持直接渲染百度 SDK 返回的 polyline 对象,必须手动转成 uni-app 原生 polyline 格式:
- 百度返回的路径点是
{point: {lng: xxx, lat: xxx}}数组,uni-app 要求是[{longitude: xxx, latitude: xxx}] - 颜色、宽度等样式不能用百度的
strokeColor,得塞进<map>的polyline属性里,例如:polyline: [{ points: [...], color: '#007AFF', width: 6 }] - App 端(尤其是 iOS)若未在
info.plist中声明NSLocationWhenInUseUsageDescription,getLocation会失败,导致起点为空,规划直接终止
多端轨迹平滑的关键不是算法,是采样策略
很多人花大功夫写 Douglas-Peucker 折线简化,结果发现 H5 上丝滑、小程序上还是锯齿——问题不在算法,在定位触发时机:
- 微信小程序的
uni.onLocationChange最低间隔 1000ms,且频繁触发会导致卡顿;建议设为interval: 3000,并用速度阈值(speed > 1)过滤静止抖动点 - App 端可用
uni.startLocationUpdateBackground获取后台定位,但 iOS 要额外配置UIBackgroundModes,否则进后台就停采 - 所有端都必须对原始坐标做 GCJ-02 → WGS-84 反向纠偏(百度坐标系是 BD-09),否则叠加到原生
<map>上会偏移 300–500 米;别信网上随手 copy 的 JS 纠偏函数,用百度官方convertor.translate(注意它异步)
真正卡住人的从来不是「会不会调 API」,而是「同一份坐标数据,在 H5 里是 WGS-84,在小程序里要转 GCJ-02,到了 App 又得回 BD-09」——坐标系混用一次,轨迹就偏出一个街区。动手前,先在纸上画清每一步的输入输出坐标系。


















