MapsUI-Kit上新：RoutePlan组件，从地点搜索到路径规划，加速构建您的地图Agent

Maps UI-Kit上新：RoutePlan组件，从地点搜索到路径规划，加速构建您的地图Agent

百度地图开放平台| 2026年3月5日 20:03

既然能找到终点，何不直接规划路线？

如果搜完地点，能直接在我的应用里再加上路线规划，就完美了。

年前，我们首发了Baidu Maps UI-Kit (Places)，将3.4亿个地点信息以低代码组件的形式开放。很多开发者反馈：“如果搜完地点，能直接在我的应用里再加上路线规划，就完美了。”

今天，它来了。

Baidu Maps UI-Kit 第二期正式发布 ——RoutePlan（路径规划）组件开放使用。

如果说第一期开放的 Places 是地图的"眼睛"，让你看清世界；那么这一期开放的 RoutePlan 就是地图的"双脚"。至此，从"搜索地点"到"规划行程"的应用闭环正式打通。你离拥有一个专属的、聪明的"地图 Agent"，只差几行代码的距离。

RoutePlan：不只是画一条线

本次上新的 RoutePlan 组件，深度集成了百度地图的路线规划计算能力，首批核心能力包括：

• 出行方案：多方案的驾车出行路线规划。无论是追求最快到达，还是避开拥堵，算法内核均与百度地图 App 同源。
• • 复杂路况感知：实时同步路况动态，自动计算预计到达时间 (ETA)，让你的应用具备"上帝视角"。

核心亮点：为什么它是"Agent 时代"的标配？

1. 真正的"低代码"构建 Agent 闭环

现在的 AI Agent 不缺大脑，缺的是执行工具。通过集成 RoutePlan，你的 Agent 在感知到用户意图（如"我想去最近的咖啡馆"）后，不仅能找到位置，还能直接吐出完整的路线UI。

2. “Place + Route” 组合拳：1+1 > 2

现在，你可以将 Places UI-Kit 搜索到的 POI 结果，无缝传递给 RoutePlan 组件。

用户在你的 App 搜到酒店 -> 点击"去这里" -> 瞬间拉起导航路径。

这种丝滑的端到端体验，过去需要开发数周，现在只需调用两个组件。

3. 极致性能与视觉统一

我们优化了路径渲染引擎，即使在移动端浏览器上也能实现丝滑的缩放与平移。同时，视觉风格支持高度自定义，确保路线底色、箭头样式与你的产品调性完美契合。

真实场景：它能为你的产品带来什么？

• 本地生活/社交 App：用户约定聚会地点后，直接在应用内显示完成检索及路线规划，仅需要导航时发起导航即可，Native感更强。
• • 企业内勤/物流管理：快速搭建轻量化调度系统，一键查看外勤人员的最优配送路径。
• • AI 出行助手：配合我们开源的JSAPI Skills，你可以用自然语言驱动地图：“帮我规划一条从家去公司且不经过施工路段的驾车路线”，UI-Kit 会直接呈现结果。

快速上手：一键升级

如果你已经安装过 UI-Kit，只需确保版本更新。

1. 安装/更新 UI-Kit：

npminstall@baidumap/jsapi-ui-kit@latest

2. 调用 RoutePlan：

只需传入起点与终点坐标，剩下的交互、渲染、样式，全部交给 UI-Kit。

3. 让 AI 工具学习新能力：

如果你正在使用 Claude 或 Cursor 开发，别忘了更新 Skills 链接，让 AI 助手学会如何为你写出 RoutePlan 代码：

# 下载官方skillsgitclone https://github.com/baidu-maps/jsapi-skills.gitcdjsapi-skills# 注册或更新软链接ln-sfn"$(pwd)/skills/jsapi-ui-kit"~/.claude/skills/jsapi-ui-kit

文档与支持

• 使用文档 API：https://bmap-uikit.bj.bcebos.com/docs/index.html
• • AI Skills 项目：https://github.com/baidu-maps/jsapi-skills

地图应用的开发范式，正在被重新定义。欢迎访问百度地图开放平台官网，立刻开始构建你的下一代"地图 Agent"！

科普：百度地图首发Maps UI-Kit：一种低代码方式，将百度地图地点内容显示在您的地图上

它的核心逻辑非常简单：将用户最熟悉的百度地图原生交互界面，以组件化的形式直接"装进"到你的产品中。 不再需要为了设计一个 POI 检索详情页去反复打磨 UI，也不再需要为了调用几个 API 而写几百行逻辑代码。