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

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

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

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

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

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