/ 目录 / 演练场 / jsapi-skills
← 全部服务器 ↗ GitHub
● 社区 baidu-maps ⚡ 即开即用

jsapi-skills

作者 baidu-maps · baidu-maps/jsapi-skills

Official Baidu Maps JSAPI skills — 2D/2.5D (BMapGL), 3D with three.js, and the jsapi-ui-kit for PlaceSearch/PlaceDetail components.

baidu-maps/jsapi-skills is the official Baidu Maps team's Claude skill set. Three sub-skills: bmap-jsapi-gl (WebGL map init, overlays, events, layers, routing, geocoding), bmap-jsapi-three (3D maps with three.js — multi-source base map, 3D models, natural environment, digital twin), and jsapi-ui-kit (PlaceSearch with keyword/nearby/bounds search + PlaceDetail components). Claude gets accurate docs and code examples for Baidu Maps development.

▶ 观看演示 📦 安装 💡 使用场景

为什么要用

核心特性

实时演示

实际使用效果

jsapi-skill.replay ▶ 就绪
0/0

安装

作者仓库 · Claude Skills 官方文档

使用场景

实战用法： jsapi-skills

Embed a Baidu map with markers and routing into a web app

👤 Devs serving Chinese users where Baidu Maps is the default ⏱ ~30 min intermediate

何时使用： Google Maps isn't viable for your audience; Baidu Maps is the standard.

步骤
  1. Scaffold with bmap-jsapi-gl
    Use bmap-jsapi-gl skill — init a BMapGL map in <div id='map'>, center on Beijing, add markers for 5 lat/lng pairs.✓ 已复制
    → Claude uses correct BMapGL constructors, not the old BMap JSAPI
  2. Add routing
    Now add driving directions between the first two markers.✓ 已复制
    → DrivingRoute usage with correct event wiring

结果： A working map component in your app.

注意事项
  • Mixing legacy BMap JSAPI with BMapGL (WebGL) APIs — Skill keeps them distinct; pick one family and stick with it
搭配使用： filesystem

Render a 3D digital-twin scene over a Baidu Maps base layer

👤 Devs building industrial / smart-city visualizations ⏱ ~120 min advanced

何时使用： You need 3D models overlaid on a geospatial base.

步骤
  1. Set up bmap-jsapi-three
    bmap-jsapi-three — base map + three.js scene, load a glTF building model at given coords.✓ 已复制
    → Correct camera sync between Baidu base and three.js scene
  2. Visualize data
    Add a heatmap from sensor data points on top.✓ 已复制
    → Geodata visualization layered correctly

结果： A 3D scene anchored to real-world coordinates.

Drop-in a PlaceSearch + PlaceDetail UI with jsapi-ui-kit

👤 Devs who don't want to hand-build place-search UI ⏱ ~30 min intermediate

何时使用： You need a functional 'find nearby' UI fast.

步骤
  1. Scaffold components
    jsapi-ui-kit — PlaceSearch by keyword within current bounds + PlaceDetail panel.✓ 已复制
    → Components mounted with bind to the map instance

结果： A working place-search UX without writing the UI shell.

组合

与其他 MCP 搭配，撬动十倍杠杆

jsapi-skill + filesystem

Scaffold across your actual project structure

Create BaiduMap.tsx under src/components and wire it into the search page.✓ 已复制
jsapi-skill + github

Commit integration with proper config separation

Add the map component and open a PR; keep the ak key in .env, not source.✓ 已复制

工具

此 MCP 暴露的能力

工具输入参数何时调用成本
bmap-jsapi-gl 2D/2.5D map intent Standard map embedding 0
bmap-jsapi-three 3D scene intent + models 3D visualization 0
jsapi-ui-kit component intent (PlaceSearch / PlaceDetail) Need place-search UI without building it 0

成本与限制

运行它的成本

API 配额
Baidu Maps API has per-day quotas depending on tier
每次调用 Token 数
Moderate per sub-skill
费用
Free for dev usage; production tiers vary — check lbsyun.baidu.com
提示
Use staging ak for dev, production ak with quota monitoring for prod.

安全

权限、密钥、影响范围

凭据存储： Baidu Maps ak goes in env var / server-side; don't commit to source
数据出站： Map tiles and API calls go to Baidu Maps servers

故障排查

常见错误与修复

Wrong trigger keywords — three.js scene mis-aligned with base map

Use bmap-jsapi-three explicitly rather than generic 'three.js' prompts.

替代方案

jsapi-skills 对比其他方案

替代方案何时用它替代权衡
Google Maps JavaScript APIYour audience is outside ChinaDoesn't work reliably inside China
Mapbox / MapLibreYou want OSM-based vector tilesDifferent coordinate systems; more DIY

更多

资源

📖 阅读 GitHub 上的官方 README

🐙 查看未解决的 issue

🔍 浏览全部 400+ MCP 服务器和 Skills