This is a UI component library for Baidu Maps that gives you ready-made widgets for place autocomplete, search, details, and driving route planning. If you're building a mapping interface for the Chinese market and don't want to wire up search boxes and POI displays from scratch, this handles the standard patterns. It wraps the Baidu Maps JavaScript API (BMap/BMapGL), so you'll need that loaded first and a BMAP_JSAPI_KEY configured. The documentation is in Chinese and includes complete code examples for each component. It's really just about saving setup time on common map UI patterns rather than reinventing the autocomplete dropdown or route display every time.

skills.sh installs
260
GitHub stars
46
last updated
Aug 21, 2026

Install

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

Installs into .claude/skills of the current project.

Files

百度地图 jsapi-ui-kit

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

什么时候使用

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

文档导航

如何使用

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

references/getting-started.md

每个参考文件包含:

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

注意事项

  • 必须先加载百度地图 JS API(BMap 或 BMapGL)

Sponsors

Details

Repository
github.com/baidu-maps/jsapi-skills
Category
Frontend Development
First seen
Jun 3, 2026

More from baidu-maps/jsapi-skills

All 2
1casper-studios avatarreact-patternscasper-studios/casper-marketplaceWrite React components with minimal state, proper memoization, and type-safe patterns. Use when creating components, managing state, or optimizing renders.248skills.sh installs
2reactnativecn avatarreact-native-updatereactnativecn/react-native-update-skillreact native update242skills.sh installs
3zinohome avatarui-prompt-generatorzinohome/cozyengineui prompt generator238skills.sh installs
4akillness avatarvercel-react-best-practicesakillness/oh-my-skillsvercel react best practices230skills.sh installs
5sergiodxa avatarfrontend-async-best-practicessergiodxa/agent-skillsAsync/await and Promise optimization guidelines. Use when writing, reviewing, or refactoring asynchronous code to eliminate waterfalls and maximize parallelism.225skills.sh installs
6opentiny avatartiny-vue-skillopentiny/agent-skills当使用 TinyVue 组件库(@opentiny/vue)进行开发时或者配置 TinyVue 工程的国际化,主题配置,表单校验说明,自动导入组件等,一定要阅读本技能。本技能提供严格的 API 文档和示例,以及如何查找流程以及代码规范。221skills.sh installs