Skill not invoked — Claude uses outdated BMap (non-GL) API

Say 'BMapGL' or 'bmap-jsapi-gl' explicitly.

SKILL.md frontmatter wrong in a sub-skill

Check the specific sub-skill folder.

jsapi-skills — インストール & ライブデモ

なぜ使うのか

主な機能

bmap-jsapi-gl — 2D/2.5D maps with WebGL (BMapGL)
bmap-jsapi-three — 3D maps on three.js for digital twin / environment rendering
jsapi-ui-kit — ready-made PlaceSearch and PlaceDetail components
Official — maintained by Baidu Maps team, not community reverse-engineered
Works with Claude Code, Cursor, and other agent-skill-compatible tools

ライブデモ

実際の動作

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.

フロー

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

フロー

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

フロー

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と組み合わせて10倍の力を

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
bmap-jsapi-three	3D scene intent + models	3D visualization
jsapi-ui-kit	component intent (PlaceSearch / PlaceDetail)	Need place-search UI without building it

コストと制限

運用コスト

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

If users outside China hit the map, performance may be inconsistent — plan CDN and fallback strategy.
Mind China's map coordinate system (GCJ-02 / BD-09) when mixing with other data sources.

トラブルシューティング

よくあるエラーと対処法

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 API	Your audience is outside China	Doesn't work reliably inside China
Mapbox / MapLibre	You want OSM-based vector tiles	Different coordinate systems; more DIY

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る