نظرة عامة على العلامات

استخدم محددات المواقع لعرض المواقع الفردية على الخريطة. يوضح لك هذا الدليل كيفية استخدام العلامات المتقدمة. وباستخدام العلامات المتقدمة، يمكنك إنشاء وتخصيص علامات ذات أداء عالٍ، وإنشاء علامات يمكن الوصول إليها تستجيب لأحداث النقر في نموذج العناصر في المستند (DOM) وإدخالات لوحة المفاتيح. للحصول على تخصيص أكثر تفصيلاً، توفّر العلامات المتقدّمة استخدام HTML وCSS المخصّصَين، بما في ذلك إمكانية إنشاء علامات مخصّصة بالكامل. بالنسبة إلى التطبيقات الثلاثية الأبعاد، يمكنك التحكّم في الارتفاع الذي يظهر عنده العلامة. تتوفّر العلامات المتقدّمة في كلّ من الخرائط النقطية والمتجهة (على الرغم من أنّ بعض الميزات غير متاحة في الخرائط النقطية). يجب توفُّر رقم تعريف خريطة لاستخدام "محدّدات المواقع المتقدّمة" (يمكن استخدام DEMO_MAP_ID).

بدء استخدام العلامات المتقدمة

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

قم بتخصيص خلفية العلامة الافتراضية والرسم البياني ولون الحد واضبط حجم العلامة.

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

إنشاء علامات HTML مخصصة

استخدِم HTML وCSS المخصّصَين لإنشاء علامات تفاعلية مميزة من الناحية المرئية، وإنشاء صور متحركة.

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

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

function initMap() {
  const map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 37.4239163, lng: -122.0947209},
    zoom: 17,
    mapId: 'DEMO_MAP_ID',
  });

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

  marker.addListener('click', ({domEvent, latLng}) => {
    const {target} = domEvent;
    // Handle the click event.
    // ...
  });
}

ضبط ارتفاع العلامة وسلوك الاصطدام

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

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

• بدء استخدام العلامات المتقدّمة