Advanced Markers

AdvancedMarkerElement class

class google.maps.marker.AdvancedMarkerElement 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]) פרמטרים: options: AdvancedMarkerElementOptions optional יוצרת 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	סוג: LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional 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	הוצא משימוש: צריך להשתמש ישירות ב-AdvancedMarkerElement. סוג: HTMLElement השדה הזה הוא לקריאה בלבד. רכיב ה-DOM שמגבה את התצוגה.
content	הוצא משימוש: במקום זאת, צריך להשתמש ב-‎.children. סוג: Node optional AdvancedMarkerElementOptions.content.

Methods
addListener	הוצאה משימוש: במקום זאת, צריך להשתמש בשיטת DOM addEventListener() הרגילה. addListener(eventName, handler) פרמטרים: eventName: string אירוע שנצפה. handler: Function פונקציה לטיפול באירועים. ערך מוחזר: MapsEventListener רכיב event listener שנוצר. מוסיפה את פונקציית ה-listener הנתונה לשם האירוע הנתון במערכת האירועים של מפות Google.
בירושה: addEventListener, removeEventListener

אירועים
gmp-click	function(event) ארגומנטים: event: AdvancedMarkerClickEvent האירוע הזה מופעל כשלוחצים על הרכיב AdvancedMarkerElement. נתמך רק עם addEventListener() (במקום addListener()).
gmp-drag	function(event) ארגומנטים: event: Event האירוע הזה מופעל שוב ושוב בזמן שהמשתמש גורר את AdvancedMarkerElement. נתמך רק עם addEventListener() (במקום addListener()).
gmp-dragend	function(event) ארגומנטים: event: Event האירוע הזה מופעל כשהמשתמש מפסיק לגרור את AdvancedMarkerElement. נתמך רק עם addEventListener() (במקום addListener()).
gmp-dragstart	function(event) ארגומנטים: event: Event האירוע הזה מופעל כשהמשתמש מתחיל לגרור את AdvancedMarkerElement. נתמך רק עם addEventListener() (במקום addListener()).
click	הוצאה משימוש: במקום זאת, צריך להשתמש ב-AdvancedMarkerElement.gmp-click. function(event) ארגומנטים: event: MapMouseEvent האירוע הזה מופעל כשלוחצים על הרכיב AdvancedMarkerElement.‫ לא זמין עם addEventListener() (צריך להשתמש ב-gmp-click במקום זאת).
dragstart	הוצאה משימוש: במקום זאת, צריך להשתמש ב-AdvancedMarkerElement.gmp-dragstart. function(event) ארגומנטים: event: MapMouseEvent האירוע הזה מופעל כשהמשתמש מתחיל לגרור את AdvancedMarkerElement.‫ לא זמין עם addEventListener() (צריך להשתמש ב-gmp-dragstart במקום זאת).
drag	הוצאה משימוש: במקום זאת, צריך להשתמש ב-AdvancedMarkerElement.gmp-drag. function(event) ארגומנטים: event: MapMouseEvent האירוע הזה מופעל שוב ושוב בזמן שהמשתמש גורר את AdvancedMarkerElement.‫ לא זמין עם addEventListener() (צריך להשתמש ב-gmp-drag במקום זאת).
dragend	הוצאה משימוש: במקום זאת, צריך להשתמש ב-AdvancedMarkerElement.gmp-dragend. function(event) ארגומנטים: event: MapMouseEvent האירוע הזה מופעל כשהמשתמש מפסיק לגרור את AdvancedMarkerElement.‫ לא זמין עם addEventListener() (צריך להשתמש ב-gmp-dragend במקום זאת).

ממשק AdvancedMarkerElementOptions

ממשק google.maps.marker.AdvancedMarkerElementOptions
מיושם על ידי AdvancedMarkerElement

אפשרויות ליצירת 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 אופציונלי	סוג: LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional מגדיר את המיקום של AdvancedMarkerElement. אפשר ליצור AdvancedMarkerElement בלי מיקום, אבל הוא לא יוצג עד שהמיקום שלו יסופק – למשל, על ידי פעולות או בחירות של המשתמש. אפשר לציין את המיקום של AdvancedMarkerElement באמצעות הגדרת AdvancedMarkerElement.position אם הוא לא צוין ב-constructor. הערה: 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

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

האירוע הזה נוצר מלחיצה על סמן מתקדם. אפשר לגשת למיקום של הסמן באמצעות event.target.position.

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

הכיתה PinElement

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

PinElement מייצג רכיב DOM שמורכב מצורה ומגליף. לצורה יש את אותו סגנון בועה כמו בברירת המחדל AdvancedMarkerElement או Marker3DElement. הגליף הוא רכיב DOM אופציונלי שמוצג בצורת הבלון. יחס הגובה-רוחב של PinElement עשוי להשתנות בהתאם לPinElement.scale שלו.

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

יצרן
PinElement	PinElement([options]) פרמטרים: options: PinElementOptions optional

מאפיינים
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	הוצא משימוש: צריך להשתמש ישירות ב-PinElement. סוג: HTMLElement השדה הזה הוא לקריאה בלבד. רכיב ה-DOM שמגבה את התצוגה.
glyph	הוצא משימוש: במקומו צריך להשתמש ב-PinElementOptions.glyphText או ב-PinElementOptions.glyphSrc. סוג: string|Element|URL optional PinElementOptions.glyph.

Methods
בירושה: addEventListener, removeEventListener

הממשק PinElementOptions

ממשק google.maps.marker.PinElementOptions
מיושם על ידי PinElement

אפשרויות ליצירת PinElement.

מאפיינים
background אופציונלי	סוג: string optional צבע הרקע של צורת הסיכה. תומך בכל ערך צבע ב-CSS.
borderColor אופציונלי	סוג: string optional צבע הגבול של צורת הסיכה. תומך בכל ערך צבע ב-CSS.
glyph אופציונלי	הוצא משימוש: במקומו צריך להשתמש ב-PinElementOptions.glyphText או ב-PinElementOptions.glyphSrc. סוג: string|Element|URL optional רכיב ה-DOM שמוצג בסיכה.
glyphColor אופציונלי	סוג: string optional הצבע של הגליף. תומך בכל ערך צבע ב-CSS.
glyphSrc אופציונלי	סוג: URL|string optional מקור התמונה של הגליף שיוצג בסיכה.
glyphText אופציונלי	סוג: string optional הטקסט שמוצג בסיכה.
scale אופציונלי	סוג: number optional ברירת המחדל: 1 קנה המידה של הסיכה.