استخدِم علامات لجذب انتباه المستخدم إلى موقع جغرافي على الخريطة. يوضّح هذا الدليل كيفية استخدام العلامات وتخصيصها في الخرائط الثلاثية الأبعاد. يمكنك التحكّم في شكل العلامات وحجمها ولونها، بالإضافة إلى الارتفاع الذي تظهر عنده. يعرض المثال التالي علامة أساسية:
توفّر "خرائط ثلاثية الأبعاد" في Maps JavaScript فئتَين مختلفتَين من العلامات، تم تحسين كلّ منهما لاستخدامات محدّدة. يوضّح الجدول التالي الاختلافات والمفاضلة بين الفئتَين المتاحتَين:
| إمكانية | MarkerElement |
Marker3DElement |
|---|---|---|
| التخصيص | عالية (تتيح استخدام عناصر HTML المخصّصة وواجهات برمجة التطبيقات الأساسية للحركة وما إلى ذلك) | منخفضة (خيارات تخصيص أقل) |
| الأداء | انخفاض أداء التفاعل (انخفاض عدد اللقطات في الثانية مع عدد كبير من العلامات) | أداء تفاعلي أفضل (تم تحسينه لعرض مجموعات البيانات الكبيرة) |
| السعة المقترَحة | أداء موثوق للتفاعلات مع ما يصل إلى 1,000 علامة تقريبًا | يُنصح باستخدامه للتعامل مع أكثر من 1,000 علامة |
تخصيص اللون والمقياس وصورة الرمز
تخصيص خلفية العلامة التلقائية ورمزها ولون حدودها وحجمها

استبدِل رمز العلامة التلقائي بمورد SVG مخصّص.

تحديد ارتفاع العلامة
يمكنك ضبط ارتفاع العلامة عن طريق بثق العلامة وتحديد الارتفاع.

جعل العلامات تستجيب للأحداث الناتجة عن النقر ولوحة المفاتيح
اجعل العلامة تستجيب للنقرات وأحداث لوحة المفاتيح من خلال إضافة click مستمع حدث.
const interactiveMarker = new Marker3DInteractiveElement({ position, gmpPopoverTargetElement: popover, });
تحديد سلوك تصادم العلامات
تحديد طريقة عمل العلامة عند اصطدامها بعلامة أخرى أو بتسمية على الخريطة
const marker = new Marker3DElement({ position: { lat, lng }, // Try setting a different collision behavior here. collisionBehavior: 'REQUIRED', });
أداء العلامة
تقدّم علامات HTML المخصّصة (MarkerElement) أداءً أقل من علامات 3D العادية (Marker3DElement). بالنسبة إلى التطبيقات التي تتضمّن أكثر من 1,000 علامة، يُنصح بشدة باستخدام Marker3dElement
class لضمان تحقيق الأداء الأمثل.