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

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

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

ملاحظة: إذا كانت خريطتك تستخدم علامات قديمة، ننصحك بالانتقال إلى العلامات المتقدّمة.

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

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

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

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

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

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

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

يمكنك جعل العلامة تستجيب للنقرات وأحداث لوحة المفاتيح من خلال إضافة متتبِّع الأحداث gmp-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.addEventListener('gmp-click', (event) => {
    // Handle the click event.
    // ...
  });
}

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

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

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

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