/ Directorio / Playground / jsapi-skills
← Todos los servidores ↗ GitHub
● Comunidad baidu-maps ⚡ Instantáneo

jsapi-skills

por 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.

▶ Ver demo 📦 Instalar 💡 Casos de uso

Por qué usarlo

Características clave

Demo en vivo

Cómo se ve en la práctica

jsapi-skill.replay ▶ listo
0/0

Instalación

Repositorio del autor · Documentación oficial de Skills de Claude

Casos de uso

Usos del mundo real: 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

Cuándo usarlo: Google Maps isn't viable for your audience; Baidu Maps is the standard.

Flujo
  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.✓ Copiado
    → Claude uses correct BMapGL constructors, not the old BMap JSAPI
  2. Add routing
    Now add driving directions between the first two markers.✓ Copiado
    → DrivingRoute usage with correct event wiring

Resultado: A working map component in your app.

Errores comunes
  • Mixing legacy BMap JSAPI with BMapGL (WebGL) APIs — Skill keeps them distinct; pick one family and stick with it
Combinar con: filesystem

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

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

Cuándo usarlo: You need 3D models overlaid on a geospatial base.

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

Resultado: 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

Cuándo usarlo: You need a functional 'find nearby' UI fast.

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

Resultado: A working place-search UX without writing the UI shell.

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

jsapi-skill + filesystem

Scaffold across your actual project structure

Create BaiduMap.tsx under src/components and wire it into the search page.✓ Copiado
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.✓ Copiado

Herramientas

Lo que expone este MCP

HerramientaEntradasCuándo llamarCoste
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

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API
Baidu Maps API has per-day quotas depending on tier
Tokens por llamada
Moderate per sub-skill
Monetario
Free for dev usage; production tiers vary — check lbsyun.baidu.com
Consejo
Use staging ak for dev, production ak with quota monitoring for prod.

Seguridad

Permisos, secretos, alcance

Almacenamiento de credenciales: Baidu Maps ak goes in env var / server-side; don't commit to source
Salida de datos: Map tiles and API calls go to Baidu Maps servers

Resolución de problemas

Errores comunes y soluciones

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

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

Alternativas

jsapi-skills vs otros

AlternativaCuándo usarlaContrapartida
Google Maps JavaScript APIYour audience is outside ChinaDoesn't work reliably inside China
Mapbox / MapLibreYou want OSM-based vector tilesDifferent coordinate systems; more DIY

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills