المحدِّدات

استخدِم علامات لجذب انتباه المستخدم إلى موقع جغرافي على الخريطة. يوضّح هذا الدليل كيفية استخدام العلامات وتخصيصها في الخرائط الثلاثية الأبعاد. يمكنك التحكّم في شكل العلامات وحجمها ولونها، بالإضافة إلى الارتفاع الذي تظهر عنده. يعرض المثال التالي علامة أساسية:

توفّر "خرائط ثلاثية الأبعاد" في 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 لضمان تحقيق الأداء الأمثل.

الخطوة التالية