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

اختيار النظام الأساسي: Android iOS JavaScript

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

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

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

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

لقطة شاشة تعرض بعض العلامات المخصّصة

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

لقطة شاشة تعرض علامات SVG مخصّصة.

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

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

لقطة شاشة تعرِض علامة HTML مخصّصة

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

يمكنك جعل العلامة تستجيب للنقرات وأحداث لوحة المفاتيح عن طريق إضافة أداة معالجة حدث 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.
    // ...
  });
}

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

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

لقطة شاشة تعرِض علامة تم تعديل ارتفاعها

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