Advanced Markers

فئة AdvancedMarkerElement

google.maps.marker.AdvancedMarkerElement class
extends HTMLElement
implements AdvancedMarkerElementOptions
library "marker"

يعرض موقعًا جغرافيًا على الخريطة. يُرجى العِلم أنّه يجب ضبط السمة position ليتم عرض السمة AdvancedMarkerElement.

   
<gmp-advanced-marker
  anchor-left="string"
  anchor-top="string"
  gmp-clickable
  position="lat,lng"
  title="string">
</gmp-advanced-marker>
 
const {AdvancedMarkerElement} = await google.maps.importLibrary("marker");
AdvancedMarkerElement
AdvancedMarkerElement([options])
المَعلمات:
تنشئ هذه الدالة AdvancedMarkerElement بالخيارات المحدّدة. في حال تحديد خريطة، تتم إضافة AdvancedMarkerElement إلى الخريطة عند الإنشاء.
anchorLeft
attr: anchor-left
النوع: string optional
الإعداد التلقائي: "‎-50%"
قيمة نسبة طول CSS تُستخدَم لإزاحة نقطة الارتساء الخاصة بالعلامة من الزاوية العلوية اليمنى للعلامة. ويكون ذلك مفيدًا عند استخدام عنصر مرئي يحتوي على نقطة ارتساء تختلف عن نقطة المنتصف السفلية المعتادة للعلامة التلقائية.
سمة HTML: anchor-left="string"
anchorTop
attr: anchor-top
النوع: string optional
القيمة التلقائية: "‎-100%"
قيمة نسبة طول CSS تُستخدَم لإزاحة نقطة الارتساء الخاصة بالعلامة من الزاوية العلوية اليمنى للعلامة. ويكون ذلك مفيدًا عند استخدام عنصر مرئي يحتوي على نقطة ارتساء تختلف عن نقطة المنتصف السفلية المعتادة للعلامة التلقائية.
سمة HTML: anchor-top="string"
collisionBehavior
النوع: CollisionBehavior optional
يمكنك الاطّلاع على AdvancedMarkerElementOptions.collisionBehavior.
gmpClickable
attr: gmp-clickable
النوع: boolean optional
يمكنك الاطّلاع على AdvancedMarkerElementOptions.gmpClickable.
سمة HTML: gmp-clickable
gmpDraggable
النوع: boolean optional
يمكنك الاطّلاع على AdvancedMarkerElementOptions.gmpDraggable.
map
النوع: Map optional
يمكنك الاطّلاع على AdvancedMarkerElementOptions.map.
position
attr: position
يمكنك الاطّلاع على AdvancedMarkerElementOptions.position.
سمة HTML:
  • position="lat,lng"
  • position="lat,lng,altitude"
title
attr: title
النوع: string
يمكنك الاطّلاع على AdvancedMarkerElementOptions.title.
سمة HTML: title="string"
zIndex
النوع: number optional
يمكنك الاطّلاع على AdvancedMarkerElementOptions.zIndex.
element
readonly
النوع: HTMLElement
هذا الحقل متاح للقراءة فقط. عنصر DOM الذي يدعم العرض
content
النوع: Node optional
يمكنك الاطّلاع على AdvancedMarkerElementOptions.content.
addListener
addListener(eventName, handler)
المَعلمات:
  • ‫eventName: حدث "string" المرصود
  • ‫handler: Function دالة لمعالجة الأحداث
القيمة المعروضة: MapsEventListener متتبِّع الأحداث الناتج
تضيف هذه الدالة وظيفة أداة معالجة الحدث المحدّدة إلى اسم الحدث المحدّد في نظام Maps Eventing.
السمات المكتسَبة: addEventListener، removeEventListener
click
function(event)
الوسيطات:
يتم تنشيط هذا الحدث عند النقر على العنصر AdvancedMarkerElement.‫

لا يتوفّر هذا الخيار مع addEventListener() (استخدِم gmp-click بدلاً منه).
drag
function(event)
الوسيطات:
يتم تشغيل هذا الحدث بشكل متكرر أثناء سحب المستخدم لـ AdvancedMarkerElement.

غير متوفّر مع addEventListener().
dragend
function(event)
الوسيطات:
يتم تنشيط هذا الحدث عندما يتوقف المستخدم عن سحب AdvancedMarkerElement.

غير متوفّر مع addEventListener().
dragstart
function(event)
الوسيطات:
يتم تنشيط هذا الحدث عندما يبدأ المستخدم في سحب AdvancedMarkerElement.

لا يتوفّر هذا الخيار مع addEventListener().
gmp-click
function(event)
الوسيطات:
يتم تنشيط هذا الحدث عند النقر على العنصر AdvancedMarkerElement. يُفضَّل استخدامها مع addEventListener() (بدلاً من addListener()).

واجهة AdvancedMarkerElementOptions

واجهة google.maps.marker.AdvancedMarkerElementOptions

خيارات إنشاء AdvancedMarkerElement
anchorLeft
اختياري
النوع: string optional
الإعداد التلقائي: "‎-50%"
قيمة نسبة طول CSS تُستخدَم لإزاحة نقطة الارتساء الخاصة بالعلامة من الزاوية العلوية اليمنى للعلامة. ويكون ذلك مفيدًا عند استخدام عنصر مرئي يحتوي على نقطة ارتساء تختلف عن نقطة المنتصف السفلية المعتادة للعلامة التلقائية.
anchorTop
اختياري
النوع: string optional
القيمة التلقائية: "‎-100%"
قيمة نسبة طول CSS تُستخدَم لإزاحة نقطة الارتساء الخاصة بالعلامة من الزاوية العلوية اليمنى للعلامة. ويكون ذلك مفيدًا عند استخدام عنصر مرئي يحتوي على نقطة ارتساء تختلف عن نقطة المنتصف السفلية المعتادة للعلامة التلقائية.
collisionBehavior
اختياري
النوع: CollisionBehavior optional
تعداد يحدّد سلوك AdvancedMarkerElement عند تداخله مع AdvancedMarkerElement آخر أو مع تصنيفات الخريطة الأساسية على خريطة اتجاهية.

ملاحظة: يعمل تداخل AdvancedMarkerElement مع AdvancedMarkerElement على كلّ من الخرائط النقطية والاتجاهية، ولكنّ تداخل AdvancedMarkerElement مع تصنيف الخريطة الأساسية يعمل على الخرائط الاتجاهية فقط.
content
اختياري
النوع: Node optional
القيمة التلقائية: PinElement
عنصر DOM الذي يدعم العنصر المرئي لـ AdvancedMarkerElement.

ملاحظة: لا ينسخ AdvancedMarkerElement عنصر DOM الذي تم تمريره. بعد تمرير عنصر DOM إلى AdvancedMarkerElement، سيؤدي تمرير عنصر DOM نفسه إلى AdvancedMarkerElement آخر إلى نقل عنصر DOM وجعل AdvancedMarkerElement السابق يبدو فارغًا.
gmpClickable
اختياري
النوع: boolean optional
القيمة التلقائية: false
إذا كانت القيمة true، سيكون من الممكن النقر على AdvancedMarkerElement وتشغيل الحدث gmp-click، وسيكون تفاعليًا لأغراض تسهيل الاستخدام (مثل السماح بالتنقّل باستخدام لوحة المفاتيح عبر مفاتيح الأسهم).
gmpDraggable
اختياري
النوع: boolean optional
القيمة التلقائية: false
إذا كان true، يمكن سحب AdvancedMarkerElement.

ملاحظة: لا يمكن سحب AdvancedMarkerElement مع الارتفاع.
map
اختياري
النوع: Map optional
الخريطة التي سيتم عرض AdvancedMarkerElement عليها يجب توفير الخريطة لعرض AdvancedMarkerElement، ويمكن توفيرها من خلال ضبط AdvancedMarkerElement.map إذا لم يتم توفيرها عند الإنشاء.
position
اختياري
يضبط موضع AdvancedMarkerElement. يمكن إنشاء AdvancedMarkerElement بدون موضع، ولكن لن يتم عرضه إلى أن يتم تحديد موضعه، مثلاً من خلال إجراءات المستخدم أو خياراته. يمكن توفير موضع AdvancedMarkerElement من خلال ضبط AdvancedMarkerElement.position إذا لم يتم توفيره في الإنشاء.

ملاحظة: لا تتوفّر ميزة AdvancedMarkerElement مع الارتفاع إلا في الخرائط الاتجاهية.
title
اختياري
النوع: string optional
نص التمرير في حال توفيره، ستتم إضافة نص تسهيل الاستخدام (على سبيل المثال، للاستخدام مع برامج قراءة الشاشة) إلى AdvancedMarkerElement بالقيمة المقدَّمة.
zIndex
اختياري
النوع: number optional
يتم عرض جميع AdvancedMarkerElement على الخريطة بترتيب zIndex، مع عرض القيم الأعلى أمام AdvancedMarkerElement ذات القيم الأقل. يتم تلقائيًا عرض AdvancedMarkerElement وفقًا لموضعها الرأسي على الشاشة، حيث تظهر AdvancedMarkerElement السفلية أمام AdvancedMarkerElement في أعلى الشاشة. قد يؤدي المزج بين العلامات التي تحتوي على سمة zIndex صريحة والعلامات التي لا تحتوي عليها إلى نتائج مرئية غير متوقعة. لضمان سلوك يمكن توقّعه، ننصحك إما بضبط السمة zIndex لجميع العلامات أو تركها بدون ضبط. يُرجى العِلم أنّ zIndex يُستخدَم أيضًا للمساعدة في تحديد الأولوية النسبية بين علامات CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY المتقدّمة. تشير قيمة zIndex الأعلى إلى أولوية أعلى.

فئة AdvancedMarkerClickEvent

google.maps.marker.AdvancedMarkerClickEvent class
extends Event
library "marker"

يتم إنشاء هذا الحدث من خلال النقر على علامة متقدّمة. يمكنك الوصول إلى موضع العلامة باستخدام event.target.position.

const {AdvancedMarkerClickEvent} = await google.maps.importLibrary("marker");

فئة PinElement

google.maps.marker.PinElement class
extends HTMLElement
implements PinElementOptions
library "marker"

يمثّل PinElement عنصر DOM يتكوّن من شكل ورمز. يحتوي الشكل على نمط البالون نفسه الذي يظهر في AdvancedMarkerElement أو Marker3DElement التلقائي. الرمز هو عنصر DOM اختياري يتم عرضه في شكل بالون. قد تختلف نسبة العرض إلى الارتفاع في PinElement حسب PinElement.scale.

const {PinElement} = await google.maps.importLibrary("marker");
PinElement
PinElement([options])
المَعلمات:
background
النوع: string optional
لون خلفية شكل الدبوس يمكنك الاطّلاع على PinElementOptions.background.
borderColor
النوع: string optional
لون حدود شكل الدبوس يمكنك الاطّلاع على PinElementOptions.borderColor.
glyphColor
النوع: string optional
لون الدبوس يمكنك الاطّلاع على PinElementOptions.glyphColor.
glyphSrc
النوع: URL|string optional
مصدر صورة الرمز التي سيتم عرضها في الدبوس يمكنك الاطّلاع على PinElementOptions.glyphSrc.
glyphText
النوع: string optional
النص المعروض في الدبوس. يمكنك الاطّلاع على PinElementOptions.glyphText.
scale
النوع: number optional
يمكنك الاطّلاع على PinElementOptions.scale.
element
readonly
النوع: HTMLElement
هذا الحقل متاح للقراءة فقط. عنصر DOM الذي يدعم العرض
glyph
النوع: string|Element|URL optional
يمكنك الاطّلاع على PinElementOptions.glyph.
السمات المكتسَبة: addEventListener، removeEventListener

واجهة PinElementOptions

واجهة google.maps.marker.PinElementOptions

خيارات إنشاء PinElement
background
اختياري
النوع: string optional
لون خلفية شكل الدبوس تتيح هذه السمة استخدام أي قيمة لون في CSS.
borderColor
اختياري
النوع: string optional
لون حدود شكل الدبوس تتيح هذه السمة استخدام أي قيمة لون في CSS.
glyph
اختياري
النوع: string|Element|URL optional
عنصر DOM المعروض في الدبوس
glyphColor
اختياري
النوع: string optional
لون الرمز تتيح هذه السمة استخدام أي قيمة لون في CSS.
glyphSrc
اختياري
النوع: URL|string optional
مصدر صورة الرمز التي سيتم عرضها في الدبوس
glyphText
اختياري
النوع: string optional
النص المعروض في الدبوس.
scale
اختياري
النوع: number optional
القيمة التلقائية: 1
مقياس الدبوس