/ Каталог / Песочница / 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 — эффект x10

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
Токенов на вызов
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

Ещё

Ресурсы

📖 Читать официальный README на GitHub

🐙 Открытые задачи

🔍 Все 400+ MCP-серверов и Skills