Advanced Markers

AdvancedMarkerElement-Klasse

Klasse google.maps.marker.AdvancedMarkerElement

Zeigt eine Position auf einer Karte an. Beachten Sie, dass position festgelegt sein muss, damit AdvancedMarkerElement angezeigt wird.

Benutzerdefiniertes Element:
<gmp-advanced-marker anchor-left="string" anchor-top="string" gmp-clickable position="lat,lng" title="string"></gmp-advanced-marker>

Diese Klasse erweitert HTMLElement.

Diese Klasse implementiert AdvancedMarkerElementOptions.

Zugriff durch Aufrufen von const {AdvancedMarkerElement} = await google.maps.importLibrary("marker").
Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.
AdvancedMarkerElement
AdvancedMarkerElement([options])
Parameter: 
Erstellt ein AdvancedMarkerElement-Objekt mit den angegebenen Optionen. Wenn eine Karte angegeben ist, wird das AdvancedMarkerElement-Objekt beim Erstellen der Karte hinzugefügt.
anchorLeft
Typ: string optional
Standard: „-50%“
Ein CSS-Längenprozentwert, der verwendet wird, um den Ankerpunkt der Markierung von der oberen linken Ecke der Markierung zu versetzen. Das ist nützlich, wenn Sie ein Bild verwenden, dessen Ankerpunkt sich von dem typischen unteren Mittelpunkt der Standardmarkierung unterscheidet.
HTML-Attribut:
  • <gmp-advanced-marker anchor-left="string"></gmp-advanced-marker>
anchorTop
Typ: string optional
Standardwert: „-100%“
Ein CSS-Längenprozentwert, der verwendet wird, um den Ankerpunkt der Markierung von der oberen linken Ecke der Markierung zu versetzen. Das ist nützlich, wenn Sie ein Bild verwenden, dessen Ankerpunkt sich von dem typischen unteren Mittelpunkt der Standardmarkierung unterscheidet.
HTML-Attribut:
  • <gmp-advanced-marker anchor-top="string"></gmp-advanced-marker>
collisionBehavior
Typ: CollisionBehavior optional
AdvancedMarkerElementOptions.collisionBehavior ansehen.
gmpClickable
Typ: boolean optional
AdvancedMarkerElementOptions.gmpClickable ansehen.
HTML-Attribut:
  • <gmp-advanced-marker gmp-clickable></gmp-advanced-marker>
gmpDraggable
Typ: boolean optional
AdvancedMarkerElementOptions.gmpDraggable ansehen.
map
Typ: Map optional
AdvancedMarkerElementOptions.map ansehen.
position
AdvancedMarkerElementOptions.position ansehen.
HTML-Attribut:
  • <gmp-advanced-marker position="lat,lng"></gmp-advanced-marker>
  • <gmp-advanced-marker position="lat,lng,altitude"></gmp-advanced-marker>
title
Typ: string
AdvancedMarkerElementOptions.title ansehen.
HTML-Attribut:
  • <gmp-advanced-marker title="string"></gmp-advanced-marker>
zIndex
Typ: number optional
AdvancedMarkerElementOptions.zIndex ansehen.
element
Dieses Feld ist schreibgeschützt. Das DOM-Element, das die Ansicht unterstützt.
content
Typ: Node optional
AdvancedMarkerElementOptions.content ansehen.
addEventListener
addEventListener(type, listener[, options])
Parameter: 
  • type:  string Ein String, bei dem die Groß-/Kleinschreibung berücksichtigt wird und der den Ereignistyp darstellt, auf den gewartet werden soll.
  • listener:  EventListener|EventListenerObject Das Objekt, das eine Benachrichtigung erhält. Dies muss eine Funktion oder ein Objekt mit der handleEvent-Methode sein
  • options:  boolean|AddEventListenerOptions optional Siehe Optionen. Benutzerdefinierte Ereignisse unterstützen nur capture und passive.
Rückgabewert: void
Richtet eine Funktion ein, die aufgerufen wird, wenn das angegebene Ereignis an das Ziel übermittelt wird. Siehe addEventListener
addListener
addListener(eventName, handler)
Parameter: 
  • eventName:  string Beobachtetes Ereignis.
  • handler:  Function-Funktion zum Verarbeiten von Ereignissen.
Rückgabewert:  MapsEventListener Resultierender Event-Listener.
Fügt die angegebene Listener-Funktion dem angegebenen Ereignisnamen im Maps-Ereignissystem hinzu.
removeEventListener
removeEventListener(type, listener[, options])
Parameter: 
  • type:  string Ein String, der den Ereignistyp angibt, für den ein Ereignis-Listener entfernt werden soll.
  • listener:  EventListener|EventListenerObject Der Event-Listener des Event-Handlers, der vom Ereignisziel entfernt werden soll.
  • options:  boolean|EventListenerOptions optional Siehe Optionen.
Rückgabewert: void
Entfernt einen zuvor mit addEventListener registrierten Event-Listener vom Ziel. Weitere Informationen finden Sie unter removeEventListener.
click
function(event)
Argumente: 
Dieses Ereignis wird ausgelöst, wenn auf das AdvancedMarkerElement-Element geklickt wird.

Nicht verfügbar mit addEventListener() (verwenden Sie stattdessen gmp-click).
drag
function(event)
Argumente: 
Dieses Ereignis wird wiederholt ausgelöst, während der Nutzer das AdvancedMarkerElement zieht.

Nicht verfügbar mit addEventListener().
dragend
function(event)
Argumente: 
Dieses Ereignis wird ausgelöst, wenn der Nutzer das Ziehen des AdvancedMarkerElement beendet.

Nicht verfügbar mit addEventListener().
dragstart
function(event)
Argumente: 
Dieses Ereignis wird ausgelöst, wenn der Nutzer beginnt, das AdvancedMarkerElement zu ziehen.

Nicht verfügbar mit addEventListener().
gmp-click
function(event)
Argumente: 
Dieses Ereignis wird ausgelöst, wenn auf das AdvancedMarkerElement-Element geklickt wird. Am besten mit addEventListener() (anstelle von addListener()) verwenden.

AdvancedMarkerElementOptions-Schnittstelle

Schnittstelle google.maps.marker.AdvancedMarkerElementOptions

Optionen zum Erstellen eines AdvancedMarkerElement.
anchorLeft optional
Typ: string optional
Standard: „-50%“
Ein CSS-Längenprozentwert, der verwendet wird, um den Ankerpunkt der Markierung von der oberen linken Ecke der Markierung zu versetzen. Das ist nützlich, wenn Sie ein Bild verwenden, dessen Ankerpunkt sich von dem typischen unteren Mittelpunkt der Standardmarkierung unterscheidet.
anchorTop optional
Typ: string optional
Standardwert: „-100%“
Ein CSS-Längenprozentwert, der verwendet wird, um den Ankerpunkt der Markierung von der oberen linken Ecke der Markierung zu versetzen. Das ist nützlich, wenn Sie ein Bild verwenden, dessen Ankerpunkt sich von dem typischen unteren Mittelpunkt der Standardmarkierung unterscheidet.
collisionBehavior optional
Typ: CollisionBehavior optional
Eine Aufzählung, die angibt, wie sich ein AdvancedMarkerElement verhalten soll, wenn es sich mit einem anderen AdvancedMarkerElement oder mit den Basiskartenlabels auf einer Vektorkarte überschneidet.

Hinweis: Konflikte zwischen AdvancedMarkerElement und AdvancedMarkerElement werden sowohl auf Raster- als auch auf Vektorkarten erkannt. Konflikte zwischen AdvancedMarkerElement und Labels auf der Basiskarte werden jedoch nur auf Vektorkarten erkannt.
content optional
Typ: Node optional
Standard: PinElement
Das DOM-Element, das die visuelle Darstellung eines AdvancedMarkerElement-Elements unterstützt.

Hinweis: AdvancedMarkerElement klont das übergebene DOM-Element nicht. Wenn das DOM-Element an ein AdvancedMarkerElement übergeben wurde und dann an ein anderes AdvancedMarkerElement übergeben wird, wird das DOM-Element verschoben und das vorherige AdvancedMarkerElement sieht leer aus.
gmpClickable optional
Typ: boolean optional
Standard: false
Wenn true, ist das AdvancedMarkerElement anklickbar und löst das gmp-click-Ereignis aus. Außerdem ist es für Bedienungshilfen interaktiv (z. B. für die Tastaturnavigation über die Pfeiltasten).
gmpDraggable optional
Typ: boolean optional
Standard: false
Wenn true, kann AdvancedMarkerElement gezogen werden.

Hinweis: AdvancedMarkerElement mit Höhe ist nicht ziehbar.
map optional
Typ: Map optional
Karte, auf der die AdvancedMarkerElement angezeigt werden soll. Die Karte ist erforderlich, um das AdvancedMarkerElement anzuzeigen. Sie kann durch Festlegen von AdvancedMarkerElement.map bereitgestellt werden, wenn sie nicht beim Erstellen angegeben wurde.
position optional
Legt die Position des AdvancedMarkerElement fest. Ein AdvancedMarkerElement kann ohne Position erstellt werden, wird aber erst angezeigt, wenn eine Position angegeben wird, z. B. durch die Aktionen oder Auswahl eines Nutzers. Die Position eines AdvancedMarkerElement-Objekts kann durch Festlegen von AdvancedMarkerElement.position angegeben werden, wenn sie nicht bei der Erstellung angegeben wurde.

Hinweis: AdvancedMarkerElement mit Höhe wird nur auf Vektorkarten unterstützt.
title optional
Typ: string optional
Rollover-Text. Falls angegeben, wird der AdvancedMarkerElement ein Text für Bedienungshilfen (z.B. für die Verwendung mit Screenreadern) mit dem angegebenen Wert hinzugefügt.
zIndex optional
Typ: number optional
Alle AdvancedMarkerElements werden auf der Grundlage ihres zIndex-Werts AdvancedMarkerElementin absteigender Reihenfolge auf der Karte angezeigt. Standardmäßig werden AdvancedMarkerElements entsprechend ihrer vertikalen Position auf dem Bildschirm angezeigt. AdvancedMarkerElements, die sich weiter unten befinden, werden vor AdvancedMarkerElements angezeigt, die sich weiter oben befinden. zIndex wird auch verwendet, um die relative Priorität zwischen erweiterten CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY-Markierungen festzulegen. Ein höherer zIndex-Wert gibt eine höhere Priorität an.

Klasse AdvancedMarkerClickEvent

Klasse google.maps.marker.AdvancedMarkerClickEvent

Dieses Ereignis wird erstellt, wenn auf eine erweiterte Markierung geklickt wird. Greifen Sie mit event.target.position auf die Position der Markierung zu.

Diese Klasse erweitert Event.

Zugriff durch Aufrufen von const {AdvancedMarkerClickEvent} = await google.maps.importLibrary("marker").
Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.

PinElement-Klasse

Klasse google.maps.marker.PinElement

Ein PinElement stellt ein DOM-Element dar, das aus einer Form und einer Glyphe besteht. Die Form hat denselben Ballonstil wie in der Standardeinstellung AdvancedMarkerElement oder Marker3DElement. Die Glyphe ist ein optionales DOM-Element, das in der Sprechblase angezeigt wird. Ein PinElement kann je nach PinElement.scale ein anderes Seitenverhältnis haben.

Diese Klasse erweitert HTMLElement.

Diese Klasse implementiert PinElementOptions.

Zugriff durch Aufrufen von const {PinElement} = await google.maps.importLibrary("marker").
Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.
PinElement
PinElement([options])
Parameter: 
background
Typ: string optional
PinElementOptions.background ansehen.
borderColor
Typ: string optional
PinElementOptions.borderColor ansehen.
glyphColor
Typ: string optional
PinElementOptions.glyphColor ansehen.
glyphSrc
Typ: URL|string optional
PinElementOptions.glyphSrc ansehen.
glyphText
Typ: string optional
PinElementOptions.glyphText ansehen.
scale
Typ: number optional
PinElementOptions.scale ansehen.
element
Dieses Feld ist schreibgeschützt. Das DOM-Element, das die Ansicht unterstützt.
glyph
Typ: string|Element|URL optional
PinElementOptions.glyph ansehen.
addEventListener
addEventListener(type, listener[, options])
Parameter: 
  • type:  string Ein String, bei dem die Groß-/Kleinschreibung berücksichtigt wird und der den Ereignistyp darstellt, auf den gewartet werden soll.
  • listener:  EventListener|EventListenerObject Das Objekt, das eine Benachrichtigung erhält. Dies muss eine Funktion oder ein Objekt mit der handleEvent-Methode sein
  • options:  boolean|AddEventListenerOptions optional Siehe Optionen. Benutzerdefinierte Ereignisse unterstützen nur capture und passive.
Rückgabewert: void
Richtet eine Funktion ein, die aufgerufen wird, wenn das angegebene Ereignis an das Ziel übermittelt wird. Weitere Informationen finden Sie unter addEventListener.
removeEventListener
removeEventListener(type, listener[, options])
Parameter: 
  • type:  string Ein String, der den Ereignistyp angibt, für den ein Ereignis-Listener entfernt werden soll.
  • listener:  EventListener|EventListenerObject Der Event-Listener des Event-Handlers, der vom Ereignisziel entfernt werden soll.
  • options:  boolean|EventListenerOptions optional Siehe Optionen.
Rückgabewert: void
Entfernt einen zuvor mit addEventListener registrierten Event-Listener vom Ziel. Weitere Informationen finden Sie unter removeEventListener.

PinElementOptions-Schnittstelle

Schnittstelle google.maps.marker.PinElementOptions

Optionen zum Erstellen eines PinElement.
background optional
Typ: string optional
Die Hintergrundfarbe der Stecknadelform. Unterstützt jeden CSS-Farbwert.
borderColor optional
Typ: string optional
Die Rahmenfarbe der Stecknadelform. Unterstützt jeden CSS-Farbwert.
glyph optional
Typ: string|Element|URL optional
Das im Pin angezeigte DOM-Element.
glyphColor optional
Typ: string optional
Die Farbe des Symbols. Unterstützt jeden CSS-Farbwert.
glyphSrc optional
Typ: URL|string optional
Die Quelle des Glyphenbilds, das in der Markierung angezeigt werden soll.
glyphText optional
Typ: string optional
Der Text, der in der Stecknadel angezeigt wird.
scale optional
Typ: number optional
Standard: 1
Die Skalierung der Markierung.