Advanced Markers

Klasse AdvancedMarkerElement

google.maps.marker.AdvancedMarkerElement Klasse

Zeigt eine Position auf einer Karte an. Beachten Sie, dass die position für die Anzeige der AdvancedMarkerElement festgelegt werden muss.

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

Diese Klasse erweitert HTMLElement.

Diese Klasse implementiert AdvancedMarkerElementOptions.

Zugriff durch Anrufen 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 mit den angegebenen Optionen. Wenn eine Karte angegeben ist, wird das AdvancedMarkerElement beim Erstellen der Karte hinzugefügt.
collisionBehavior
Typ:CollisionBehavior optional
AdvancedMarkerElementOptions.collisionBehavior ansehen.
gmpClickable
Typ:boolean optional
BetaAdvancedMarkerElementOptions.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, der den Ereignistyp darstellt, auf den gewartet werden soll. Die Groß-/Kleinschreibung muss beachtet werden.
  • listener:  EventListener|EventListenerObject Das Objekt, das eine Benachrichtigung erhält. Dies muss eine Funktion oder ein Objekt mit der Methode „handleEvent“ sein.
  • options:  boolean|AddEventListenerOptions optional 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 gesendet wird. Siehe addEventListener.
addListener
addListener(eventName, handler)
Parameter:
  • eventName:  string Beobachtetes Ereignis.
  • handler:  Function-Funktion zur Verarbeitung von Ereignissen.
Rückgabewert:MapsEventListener Der resultierende Event-Listener.
Fügt dem angegebenen Ereignisnamen im Maps Eventing-System die angegebene Listener-Funktion hinzu.
removeEventListener
removeEventListener(type, listener[, options])
Parameter:
Rückgabewert:void
Entfernt einen Event-Listener, der zuvor mit addEventListener für das Ziel registriert wurde. Siehe removeEventListener.
click
function(event)
Argumente: 
Dieses Ereignis wird ausgelöst, wenn auf das Element AdvancedMarkerElement 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 von 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().
Betagmp-click
function(event)
Argumente: 
Dieses Ereignis wird ausgelöst, wenn auf das Element AdvancedMarkerElement geklickt wird. Wird am besten mit addEventListener() (anstelle von addListener()) verwendet.

AdvancedMarkerElementOptions-Schnittstelle

google.maps.marker.AdvancedMarkerElementOptions-Schnittstelle

Optionen zum Erstellen eines AdvancedMarkerElement.
collisionBehavior optional
Typ:CollisionBehavior optional
Eine Enumeration, die angibt, wie sich ein AdvancedMarkerElement verhalten soll, wenn er mit einem anderen AdvancedMarkerElement oder mit den Basiskartenlabels auf einer Vektorkarte kollidiert.

Hinweis: Die Konflikterkennung zwischen AdvancedMarkerElement und AdvancedMarkerElement funktioniert sowohl auf Raster- als auch auf Vektorkarten. Die Konflikterkennung zwischen AdvancedMarkerElement und dem Label der Basiskarte funktioniert jedoch nur auf Vektorkarten.
content optional
Typ:Node optional
Standard:PinElement.element
Das DOM-Element, das die Darstellung eines AdvancedMarkerElement unterstützt.

Hinweis: AdvancedMarkerElement klont das übergebene DOM-Element nicht. Sobald das DOM-Element an ein AdvancedMarkerElement übergeben wurde, wird es verschoben, wenn es an ein anderes AdvancedMarkerElement übergeben wird. Das vorherige AdvancedMarkerElement sieht dann leer aus.
BetagmpClickable optional
Typ:boolean optional
Standard:false
Wenn true, ist AdvancedMarkerElement anklickbar und löst das gmp-click-Ereignis aus. Außerdem ist es aus Gründen der Barrierefreiheit interaktiv (z. B. ist die Tastaturnavigation über die Pfeiltasten möglich).
gmpDraggable optional
Typ:boolean optional
Standard:false
Bei true kann AdvancedMarkerElement gezogen werden.

Hinweis: AdvancedMarkerElement mit Höhenangabe kann nicht gezogen werden.
map optional
Typ:Map optional
Karte, auf der die AdvancedMarkerElement angezeigt werden sollen. Die Karte ist erforderlich, um AdvancedMarkerElement anzuzeigen. Sie kann durch Festlegen von AdvancedMarkerElement.map bereitgestellt werden, wenn sie nicht beim Erstellen angegeben wurde.
position optional
Legt die Position von AdvancedMarkerElement fest. Ein AdvancedMarkerElement kann ohne Position erstellt werden, wird aber erst angezeigt, wenn die Position angegeben wird, z. B. durch Aktionen oder Entscheidungen eines Nutzers. Die Position eines AdvancedMarkerElement kann durch Festlegen von AdvancedMarkerElement.position angegeben werden, wenn sie nicht beim Erstellen angegeben wurde.

Hinweis: AdvancedMarkerElement mit Höhe wird nur für Vektorkarten unterstützt.
title optional
Typ:string optional
Rollover-Text. Falls angegeben, wird dem 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 Karte in der Reihenfolge ihres zIndex angezeigt, wobei höhere Werte vor AdvancedMarkerElements mit niedrigeren Werten angezeigt werden. Standardmäßig werden AdvancedMarkerElements entsprechend ihrer vertikalen Position auf dem Bildschirm angezeigt. AdvancedMarkerElements, die weiter unten auf dem Bildschirm platziert sind, werden vor AdvancedMarkerElements angezeigt, die weiter oben auf dem Bildschirm platziert sind. zIndex wird auch verwendet, um die relative Priorität zwischen CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY-Markierungen zu bestimmen. Ein höherer zIndex-Wert gibt eine höhere Priorität an.

Klasse AdvancedMarkerClickEvent

google.maps.marker.AdvancedMarkerClickEvent Klasse

Dieses Ereignis wird durch Klicken auf eine erweiterte Markierung erstellt. Mit event.target.position können Sie auf die Position der Markierung zugreifen.

Diese Klasse erweitert Event.

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

Klasse PinElement

google.maps.marker.PinElement Klasse

Eine PinElement stellt ein DOM-Element dar, das aus einer Form und einem Glyphen besteht. Die Form hat denselben Sprechblasenstil wie in der Standard-AdvancedMarkerElement. Das Glyphe ist ein optionales DOM-Element, das in der Sprechblase angezeigt wird. Ein PinElement kann je nach PinElement.scale ein anderes Seitenverhältnis haben.

Hinweis:Die Verwendung als Webkomponente (z.B. als HTMLElement-Unterklasse oder über HTML) wird noch nicht unterstützt.

Diese Klasse erweitert HTMLElement.

Diese Klasse implementiert PinElementOptions.

Zugriff durch Anrufen 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.
element
Dieses Feld ist schreibgeschützt. Das DOM-Element, das die Ansicht unterstützt.
glyph
Typ:string|Element|URL optional
PinElementOptions.glyph ansehen.
glyphColor
Typ:string optional
PinElementOptions.glyphColor ansehen.
scale
Typ:number optional
PinElementOptions.scale ansehen.
BetaaddEventListener
addEventListener(type, listener[, options])
Parameter:
Rückgabewert:void
Diese Funktion ist noch nicht verfügbar.
removeEventListener
removeEventListener(type, listener[, options])
Parameter:
Rückgabewert:void
Entfernt einen Event-Listener, der zuvor mit addEventListener für das Ziel registriert wurde. Siehe removeEventListener.

PinElementOptions Schnittstelle

google.maps.marker.PinElementOptions-Schnittstelle

Optionen zum Erstellen eines PinElement
background optional
Typ:string optional
Die Hintergrundfarbe der Markierungsform. Unterstützt alle CSS-Farbwerte.
borderColor optional
Typ:string optional
Die Rahmenfarbe der Stecknadelform. Unterstützt alle CSS-Farbwerte.
glyph optional
Typ:string|Element|URL optional
Das im Pin angezeigte DOM-Element.
glyphColor optional
Typ:string optional
Die Farbe des Glyphen. Unterstützt alle CSS-Farbwerte.
scale optional
Typ:number optional
Standard:1
Die Skalierung der Markierung.