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

اختيار النظام الأساسي: 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.
    // ...
  });
}

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

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

لقطة شاشة تعرض علامة معدَّلة حسب الارتفاع

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