نظرة عامة

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

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

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

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

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

لقطة شاشة تعرض بعض العلامات المخصّصة.

يمكنك استبدال رمز محدّد الموقع بصورة مخصّصة بتنسيق 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.
    // ...
  });
}

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

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

لقطة شاشة تعرض علامة تم تعديل الارتفاع

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