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

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

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

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

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

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