jsapi-skills MCP — حالات الاستخدام, التثبيت & عرض مباشر

لماذا تستخدمه

الميزات الأساسية

bmap-jsapi-gl — خرائط ثنائية/ثنائية ونصف الأبعاد مع WebGL (BMapGL)
bmap-jsapi-three — خرائط ثلاثية الأبعاد على three.js للتوأم الرقمي / تصيير البيئة
jsapi-ui-kit — مكونات البحث عن الأماكن وتفاصيل الأماكن جاهزة الاستخدام
رسمية — يتم صيانتها من قبل فريق بايدو مابس، وليست معكوسة من المجتمع
تعمل مع Claude Code و Cursor وأدوات أخرى متوافقة مع مهارات الوكيل

عرض مباشر

كيف يبدو في الممارسة

jsapi-skill.replay ▶ جاهز

0/0

التثبيت

اختر العميل

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "jsapi-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/baidu-maps/jsapi-skills",
        "~/.claude/skills/jsapi-skills"
      ],
      "_inferred": true
    }
  }
}

افتح Claude Desktop → Settings → Developer → Edit Config. أعد التشغيل بعد الحفظ.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "jsapi-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/baidu-maps/jsapi-skills",
        "~/.claude/skills/jsapi-skills"
      ],
      "_inferred": true
    }
  }
}

يستخدم Cursor نفس مخطط mcpServers مثل Claude Desktop. إعدادات المشروع أولى من الإعدادات العامة.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "jsapi-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/baidu-maps/jsapi-skills",
        "~/.claude/skills/jsapi-skills"
      ],
      "_inferred": true
    }
  }
}

انقر على أيقونة MCP Servers في شريط Cline الجانبي، ثم "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "jsapi-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/baidu-maps/jsapi-skills",
        "~/.claude/skills/jsapi-skills"
      ],
      "_inferred": true
    }
  }
}

نفس الصيغة مثل Claude Desktop. أعد تشغيل Windsurf لتطبيق التغييرات.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "jsapi-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/baidu-maps/jsapi-skills",
        "~/.claude/skills/jsapi-skills"
      ]
    }
  ]
}

يستخدم Continue مصفوفة من كائنات الخادم بدلاً من خريطة.

~/.config/zed/settings.json

{
  "context_servers": {
    "jsapi-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/baidu-maps/jsapi-skills",
          "~/.claude/skills/jsapi-skills"
        ]
      }
    }
  }
}

أضف إلى context_servers. يعيد Zed التحميل تلقائيًا عند الحفظ.

claude mcp add jsapi-skill -- git clone https://github.com/baidu-maps/jsapi-skills ~/.claude/skills/jsapi-skills

أمر من سطر واحد. تحقق باستخدام claude mcp list. احذف باستخدام claude mcp remove.

حالات الاستخدام

استخدامات عملية: jsapi-skills

دمج خريطة بايدو مع علامات وتوجيه في تطبيق ويب

👤 المطورون الذين يخدمون المستخدمين الصينيين حيث بايدو مابس هي الخيار الافتراضي ⏱ ~30 min intermediate

متى تستخدمه: عندما لا تكون خرائط Google قابلة للاستخدام لجمهورك؛ بايدو مابس هي المعيار.

المتطلبات الأساسية

تم استنساخ المهارة — git clone https://github.com/baidu-maps/jsapi-skills ~/.claude/skills/jsapi-skills
مفتاح API لبايدو مابس (ak) — lbsyun.baidu.com — أنشئ تطبيقًا، وفعّل واجهات برمجة التطبيقات التي تحتاجها

الخطوات

إنشاء الهيكل الأساسي باستخدام bmap-jsapi-gl

استخدم مهارة bmap-jsapi-gl — تهيئة خريطة BMapGL في <div id='map'>، توسيط على بيجين، إضافة علامات لـ 5 أزواج lat/lng.✓ تم النسخ

→ Claude يستخدم منشئات BMapGL الصحيحة، وليس BMap JSAPI القديم
إضافة التوجيه

الآن أضف اتجاهات القيادة بين العلامتين الأوليين.✓ تم النسخ

→ استخدام DrivingRoute مع ربط الأحداث الصحيح

النتيجة: مكون خريطة يعمل بشكل صحيح في تطبيقك.

المزالق

مزج BMap JSAPI القديم مع واجهات برمجة التطبيقات BMapGL (WebGL) — تحافظ المهارة على تمييزهما؛ اختر عائلة واحدة والتزم بها

اجمعها مع: filesystem

تصيير مشهد التوأم الرقمي ثلاثي الأبعاد فوق طبقة أساسية من خريطة بايدو

👤 المطورون الذين يبنون تصورات صناعية / مدن ذكية ⏱ ~120 min advanced

متى تستخدمه: تحتاج إلى نماذج ثلاثية الأبعاد مرسومة فوق قاعدة جغرافية مكانية.

الخطوات

إعداد bmap-jsapi-three

bmap-jsapi-three — خريطة أساسية + مشهد three.js، حمل نموذج بناء glTF عند الإحداثيات المعطاة.✓ تم النسخ

→ مزامنة الكاميرا الصحيحة بين قاعدة بايدو ومشهد three.js
تصور البيانات

أضف خريطة حرارية من نقاط بيانات المستشعرات في الأعلى.✓ تم النسخ

→ تصور بيانات جغرافية مرتبة بشكل صحيح

النتيجة: مشهد ثلاثي الأبعاد مرتبط بالإحداثيات الحقيقية.

إدراج واجهة مستخدم البحث عن الأماكن + تفاصيل الأماكن مع jsapi-ui-kit

👤 المطورون الذين لا يريدون بناء واجهة مستخدم البحث عن الأماكن يدويًا ⏱ ~30 min intermediate

متى تستخدمه: تحتاج إلى واجهة مستخدم 'البحث القريب' وظيفية بسرعة.

الخطوات

إنشاء هيكل المكونات

jsapi-ui-kit — البحث عن الأماكن حسب الكلمات الرئيسية ضمن الحدود الحالية + لوحة تفاصيل الأماكن.✓ تم النسخ

→ تم تثبيت المكونات مع الربط بمثيل الخريطة

النتيجة: تجربة مستخدم للبحث عن الأماكن تعمل بدون كتابة غلاف واجهة المستخدم.

التركيبات

اجمعها مع خوادم MCP أخرى لتحقيق نتائج x10

jsapi-skill + filesystem

إنشاء الهيكل الأساسي عبر هيكل مشروعك الفعلي

أنشئ BaiduMap.tsx تحت src/components وربطها بصفحة البحث.✓ تم النسخ

jsapi-skill + github

دمج الالتزام مع فصل التكوين المناسب

أضف مكون الخريطة وافتح PR؛ احتفظ بمفتاح ak في .env، وليس المصدر.✓ تم النسخ

الأدوات

ما يوفره هذا الـ MCP

الأداة	المدخلات	متى تستدعيها
bmap-jsapi-gl	2D/2.5D map intent	دمج الخرائط القياسي
bmap-jsapi-three	3D scene intent + models	تصور ثلاثي الأبعاد
jsapi-ui-kit	component intent (PlaceSearch / PlaceDetail)	الحاجة إلى واجهة مستخدم للبحث عن الأماكن بدون بنائها

التكلفة والحدود

تكلفة التشغيل

حصة API: واجهة برمجة تطبيقات بايدو مابس لها حصص يومية تعتمد على المستوى
الرموز لكل استدعاء: رموز معتدلة لكل مهارة فرعية
التكلفة المالية: مجاني للاستخدام في التطوير؛ تختلف مستويات الإنتاج — تحقق من lbsyun.baidu.com
نصيحة: استخدم ak التحضير للتطوير، وak الإنتاج مع مراقبة الحصة للإنتاج.

الأمان

الصلاحيات والأسرار ونطاق الأثر

تخزين بيانات الاعتماد: ak لبايدو مابس يذهب في متغير البيئة / الخادم؛ لا تلتزم بالمصدر

نقل البيانات الخارجي: تذهب بلاطات الخريطة واستدعاءات API إلى خوادم بايدو مابس

إذا اختبر المستخدمون خارج الصين الخريطة، قد يكون الأداء غير متسق — خطط لاستراتيجية CDN والبديل.
انتبه لنظام إحداثيات الخريطة في الصين (GCJ-02 / BD-09) عند الدمج مع مصادر بيانات أخرى.

استكشاف الأخطاء

الأخطاء الشائعة وحلولها

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

قل 'BMapGL' أو 'bmap-jsapi-gl' صراحة.

تحقق: ls ~/.claude/skills/jsapi-skills/

SKILL.md frontmatter wrong in a sub-skill

تحقق من مجلد المهارة الفرعية المحددة.

تحقق: head ~/.claude/skills/jsapi-skills/bmap-jsapi-gl/SKILL.md

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

استخدم bmap-jsapi-three صراحة بدلاً من استدعاءات 'three.js' العامة.

البدائل

jsapi-skills مقابل البدائل

البديل	متى تستخدمها	المقايضة
واجهة برمجة تطبيقات Google Maps JavaScript	جمهورك خارج الصين	لا يعمل بشكل موثوق داخل الصين
Mapbox / MapLibre	تريد بلاطات متجهة قائمة على OSM	أنظمة إحداثيات مختلفة؛ أكثر DIY

jsapi-skills

لماذا تستخدمه

الميزات الأساسية

عرض مباشر

كيف يبدو في الممارسة

التثبيت

اختر العميل

حالات الاستخدام

استخدامات عملية: jsapi-skills

دمج خريطة بايدو مع علامات وتوجيه في تطبيق ويب

المتطلبات الأساسية

الخطوات

المزالق

تصيير مشهد التوأم الرقمي ثلاثي الأبعاد فوق طبقة أساسية من خريطة بايدو

الخطوات

إدراج واجهة مستخدم البحث عن الأماكن + تفاصيل الأماكن مع jsapi-ui-kit

الخطوات

التركيبات

اجمعها مع خوادم MCP أخرى لتحقيق نتائج x10

الأدوات

ما يوفره هذا الـ MCP

التكلفة والحدود

تكلفة التشغيل

الأمان

الصلاحيات والأسرار ونطاق الأثر

استكشاف الأخطاء

الأخطاء الشائعة وحلولها

البدائل

jsapi-skills مقابل البدائل

المزيد

الموارد