Skip to content
Development
Skill

/jsapi-ui-kit

百度地图官方 UI 交互组件，提供地点自动补全（PlaceAutocomplete）、地点检索（PlaceSearch）、地点详情（PlaceDetail）和路径规划（RoutePlan）组件的使用参考，快速实现地图界面，大幅提升开发效率。

BOOST
@baidu-mapsbaidu-maps@baidu-maps
From plugin
jsapi-skills
464 skills

Claude Code

$ npx -y skills add baidu-maps/jsapi-skills --skill jsapi-ui-kit --agent claude-code

SKILL.md

jsapi-ui-kit.SKILL.md
name: jsapi-ui-kit
description: 百度地图官方 UI 交互组件，提供地点自动补全（PlaceAutocomplete）、地点检索（PlaceSearch）、地点详情（PlaceDetail）和路径规划（RoutePlan）组件的使用参考，快速实现地图界面，大幅提升开发效率。
version: 1.0.1
metadata:
  openclaw:
    requires:
      env: BMAP_JSAPI_KEY
    primaryEnv: BMAP_JSAPI_KEY

百度地图 jsapi-ui-kit

轻量级百度地图 UI 组件库，提供地点自动补全、地点检索、详情展示和路径规划能力。

什么时候使用

  • 希望快速集成标准化的地图 UI 组件，无需从零开发
  • 需要在地图应用中添加搜索输入框自动补全功能
  • 需要在地图应用中添加地点搜索功能
  • 需要展示 POI 详情信息（名称、地址、电话等）
  • 需要实现驾车路径规划功能（支持多方案、途经点）

文档导航

  • **[快速开始](references/getting-started.md)** - 安装、引入方式、基础示例
  • **[PlaceAutocomplete 地点自动补全](references/place-autocomplete.md)** - 搜索输入框实时建议
  • **[PlaceSearch 地点检索](references/place-search.md)** - 关键字/周边/范围检索
  • **[PlaceDetail 地点详情](references/place-detail.md)** - POI 详情展示
  • **[RoutePlan 路径规划](references/route-plan.md)** - 驾车路径规划（多方案、途经点、导航调起）

如何使用

根据用户问题查询文档导航，参考详细文档内容和API设计：

references/getting-started.md

每个参考文件包含：

  • 功能简要说明
  • 完整代码示例及解释
  • API 参数说明和注意事项

注意事项

  • 必须先加载百度地图 JS API（BMap 或 BMapGL）
Read it on GitHub ↗
Stats
TypeScriptJavaScriptBashPHPGitGitHubAnthropic
46
Stars
1
Forks
Maintained
Maintenance
Last commit
Created

Repo: baidu-maps/jsapi-skills

In this plugin
4 skills
See everything inside
@baidu-maps
Ships withjsapi-skills

This repository provides AI assistant Skills for Baidu Map JSAPI. Use them with Claude, Cursor, or other clients that support skills so the AI can reference accurate API docs and examples when you work with Baidu Map.

464 skills
Get the whole plugin

Stars on GitHub

Momentum

stars in total
46
Star history of baidu-maps/jsapi-skills on GitHub, a chart by star-history.com
See what's trending this week

Other skills on jsapi-skills.

bmap-jsapi-gl

bmap-jsapi-gl

百度地图 JSAPI WebGL (BMapGL)完整开发指南，覆盖地图初始化、覆盖物、图层、事件、样式、性能优化的任务，一站式开发高性能 3D 地图应用。当用户提及 BMapGL、百度地图、jsapi-gl或相关地图开发需求时自动触发。

jsapi-skills
@baidu-maps@baidu-mapsInstall Skill
bmap-jsapi-three

bmap-jsapi-three

使用 MapV-Three 构建专业的 3D 地图和 GIS 应用 - 基于 Z-up 坐标系的 3D 地图库，支持地图编辑、测量工具、要素绘制、数据管理等地理可视化功能。适用于创建地图编辑器、测量工具、空间数据可视化等 Web-GIS 应用。

jsapi-skills
@baidu-maps@baidu-mapsInstall Skill
bmap-jsapi-v4

bmap-jsapi-v4

用于开发、审查或排查使用百度地图 JavaScript API 4.0、v=4.0 加载器或全局 BMap 命名空间的浏览器应用。

jsapi-skills
@baidu-maps@baidu-mapsInstall Skill

More skills from other plugins.

brainstorming
Auto-invoked

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…

superpowers2w311k
@obra@obraInstall Skill
ask-matt

ask-matt

Ask which skill or flow fits your situation. A router over the skills in this repo.

skills2w309k
@mattpocock@mattpocockInstall Skill
accessibility
Auto-invoked

accessibility

Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels,…

ecc2w293k
@affaan-m@affaan-mInstall Skill
compiler-commit

compiler-commit

Use when you want to verify compiler changes and commit with the correct convention. Runs tests, lint, and format, then commits…

react5d252k
@facebook@facebookInstall Skill

Questions about jsapi-ui-kit.

Which coding agents can use jsapi-ui-kit?
jsapi-ui-kit installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.