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

استخدم محددات المواقع لعرض المواقع الفردية على الخريطة. يوضح لك هذا الدليل كيفية استخدام العلامات المتقدمة. وباستخدام العلامات المتقدمة، يمكنك إنشاء وتخصيص علامات ذات أداء عالٍ، وإنشاء علامات يمكن الوصول إليها تستجيب لأحداث النقر في نموذج العناصر في المستند (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.
    // ...
  });
}

تعيين ارتفاع العلامة وسلوك الاصطدام

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

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

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