المحدِّدات

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

توفّر "خرائط ثلاثية الأبعاد" في Maps JavaScript فئتَين مختلفتَين من العلامات، تم تحسين كلّ منهما لحالات استخدام محدّدة. يوضّح الجدول التالي الاختلافات والمفاضلة بين الفئتَين المتاحتَين:

إمكانية	MarkerElement	Marker3DElement
التخصيص	عالية (تتيح استخدام عناصر HTML المخصّصة وواجهات برمجة التطبيقات الأساسية للحركة وما إلى ذلك)	منخفضة (خيارات تخصيص أقل)
الأداء	انخفاض أداء التفاعل (انخفاض عدد اللقطات في الثانية مع عدد كبير من العلامات)	أداء تفاعلي أفضل (تم تحسينه لعرض مجموعات البيانات الكبيرة)
السعة المقترَحة	أداء موثوق للتفاعلات يصل إلى حوالي 1,000 علامة	يُنصح باستخدامه للتعامل مع أكثر من 1,000 علامة

تخصيص اللون والمقياس وصورة الرمز

تخصيص خلفية العلامة التلقائية ورمزها ولون حدودها وحجمها

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

تحديد ارتفاع العلامة

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

جعل العلامات تستجيب للأحداث الناتجة عن النقر واستخدام لوحة المفاتيح

اجعل العلامة تستجيب للنقرات وأحداث لوحة المفاتيح من خلال إضافة أداة معالجة الأحداث click.

function initMap() {
  const map = new Map3DElement({
    center: { lat: 37.4690, lng: -122.1074, altitude: 0 },
    tilt: 67.5,
    range: 45000,
    mode: MapMode.HYBRID
  });

  const interactiveMarker = new google.maps.marker.Marker3DInteractiveElement({
    map,
    position: {lat: 37.4239163, lng: -122.0947209},
  });

  interactiveMarker.addEventListener('gmp-click', (event) => {
    // Handle the click event.
    // ...
  });
}

تحديد سلوك تصادم العلامات

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

const marker = new Marker3DElement({
    position: {lat, lng},
    collisionBehavior: google.maps.CollisionBehavior.REQUIRED
});

أداء العلامة

تقدّم علامات HTML المخصّصة (MarkerElement) أداءً أقل من علامات ثلاثية الأبعاد العادية (Marker3DElement). بالنسبة إلى التطبيقات التي تتضمّن أكثر من 1,000 علامة، يُنصح بشدة باستخدام الفئة Marker3dElement لضمان الأداء الأمثل.

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

• إضافة علامة