● مجتمع
baidu-maps
⚡ فوري
jsapi-skills
بواسطة baidu-maps · baidu-maps/jsapi-skills
مهارات بايدو مابس الرسمية JSAPI — خرائط ثنائية/ثنائية ونصف الأبعاد (BMapGL)، وثلاثية الأبعاد مع three.js، وأدوات واجهة المستخدم jsapi-ui-kit لمكونات البحث عن الأماكن وتفاصيل الأماكن.
baidu-maps/jsapi-skills هي مجموعة مهارات Claude الرسمية من فريق بايدو مابس. تتضمن ثلاث مهارات فرعية: bmap-jsapi-gl (تهيئة خرائط WebGL والطبقات الإضافية والأحداث والطبقات والتوجيه والترميز الجغرافي)، bmap-jsapi-three (خرائط ثلاثية الأبعاد مع three.js — خريطة أساسية متعددة المصادر ونماذج ثلاثية الأبعاد والبيئة الطبيعية والتوأم الرقمي)، و jsapi-ui-kit (البحث عن الأماكن مع بحث حسب الكلمات الرئيسية والبحث القريب والبحث حسب الحدود + مكونات تفاصيل الأماكن). يوفر Claude وثائق دقيقة وأمثلة أكواد لتطوير بايدو مابس.
لماذا تستخدمه
الميزات الأساسية
- bmap-jsapi-gl — خرائط ثنائية/ثنائية ونصف الأبعاد مع WebGL (BMapGL)
- bmap-jsapi-three — خرائط ثلاثية الأبعاد على three.js للتوأم الرقمي / تصيير البيئة
- jsapi-ui-kit — مكونات البحث عن الأماكن وتفاصيل الأماكن جاهزة الاستخدام
- رسمية — يتم صيانتها من قبل فريق بايدو مابس، وليست معكوسة من المجتمع
- تعمل مع Claude Code و Cursor وأدوات أخرى متوافقة مع مهارات الوكيل
عرض مباشر
كيف يبدو في الممارسة
jsapi-skill.replay
▶ جاهز
حالات الاستخدام
استخدامات عملية: jsapi-skills
متى تستخدمه: عندما لا تكون خرائط Google قابلة للاستخدام لجمهورك؛ بايدو مابس هي المعيار.
الخطوات
-
إنشاء الهيكل الأساسي باستخدام bmap-jsapi-gl
استخدم مهارة bmap-jsapi-gl — تهيئة خريطة BMapGL في <div id='map'>، توسيط على بيجين، إضافة علامات لـ 5 أزواج lat/lng.✓ تم النسخ
→ Claude يستخدم منشئات BMapGL الصحيحة، وليس BMap JSAPI القديم
-
إضافة التوجيه
الآن أضف اتجاهات القيادة بين العلامتين الأوليين.✓ تم النسخ
→ استخدام DrivingRoute مع ربط الأحداث الصحيح
النتيجة: مكون خريطة يعمل بشكل صحيح في تطبيقك.
المزالق
- مزج BMap JSAPI القديم مع واجهات برمجة التطبيقات BMapGL (WebGL) — تحافظ المهارة على تمييزهما؛ اختر عائلة واحدة والتزم بها
متى تستخدمه: تحتاج إلى نماذج ثلاثية الأبعاد مرسومة فوق قاعدة جغرافية مكانية.
الخطوات
-
إعداد bmap-jsapi-three
bmap-jsapi-three — خريطة أساسية + مشهد three.js، حمل نموذج بناء glTF عند الإحداثيات المعطاة.✓ تم النسخ
→ مزامنة الكاميرا الصحيحة بين قاعدة بايدو ومشهد three.js
-
تصور البيانات
أضف خريطة حرارية من نقاط بيانات المستشعرات في الأعلى.✓ تم النسخ
→ تصور بيانات جغرافية مرتبة بشكل صحيح
النتيجة: مشهد ثلاثي الأبعاد مرتبط بالإحداثيات الحقيقية.
متى تستخدمه: تحتاج إلى واجهة مستخدم 'البحث القريب' وظيفية بسرعة.
الخطوات
-
إنشاء هيكل المكونات
jsapi-ui-kit — البحث عن الأماكن حسب الكلمات الرئيسية ضمن الحدود الحالية + لوحة تفاصيل الأماكن.✓ تم النسخ
→ تم تثبيت المكونات مع الربط بمثيل الخريطة
النتيجة: تجربة مستخدم للبحث عن الأماكن تعمل بدون كتابة غلاف واجهة المستخدم.
التركيبات
اجمعها مع خوادم MCP أخرى لتحقيق نتائج x10
إنشاء الهيكل الأساسي عبر هيكل مشروعك الفعلي
أنشئ BaiduMap.tsx تحت src/components وربطها بصفحة البحث.✓ تم النسخ
دمج الالتزام مع فصل التكوين المناسب
أضف مكون الخريطة وافتح PR؛ احتفظ بمفتاح ak في .env، وليس المصدر.✓ تم النسخ
التكلفة والحدود
تكلفة التشغيل
- حصة API
- واجهة برمجة تطبيقات بايدو مابس لها حصص يومية تعتمد على المستوى
- الرموز لكل استدعاء
- رموز معتدلة لكل مهارة فرعية
- التكلفة المالية
- مجاني للاستخدام في التطوير؛ تختلف مستويات الإنتاج — تحقق من lbsyun.baidu.com
- نصيحة
- استخدم ak التحضير للتطوير، وak الإنتاج مع مراقبة الحصة للإنتاج.
الأمان
الصلاحيات والأسرار ونطاق الأثر
تخزين بيانات الاعتماد: ak لبايدو مابس يذهب في متغير البيئة / الخادم؛ لا تلتزم بالمصدر
نقل البيانات الخارجي: تذهب بلاطات الخريطة واستدعاءات API إلى خوادم بايدو مابس
- إذا اختبر المستخدمون خارج الصين الخريطة، قد يكون الأداء غير متسق — خطط لاستراتيجية CDN والبديل.
- انتبه لنظام إحداثيات الخريطة في الصين (GCJ-02 / BD-09) عند الدمج مع مصادر بيانات أخرى.
استكشاف الأخطاء
الأخطاء الشائعة وحلولها
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 |