Advanced Markers

AdvancedMarkerElement-Klasse

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

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

   
<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");

Konstruktor
AdvancedMarkerElement	AdvancedMarkerElement([options]) Parameter: options: AdvancedMarkerElementOptions optional Erstellt ein AdvancedMarkerElement-Objekt mit den angegebenen Optionen. Wenn eine Karte angegeben ist, wird das AdvancedMarkerElement-Objekt beim Erstellen der Karte hinzugefügt.

Attribute
anchorLeft attr: anchor-left	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: anchor-left="string"
anchorTop attr: anchor-top	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: anchor-top="string"
collisionBehavior	Typ: CollisionBehavior optional AdvancedMarkerElementOptions.collisionBehavior ansehen.
gmpClickable attr: gmp-clickable	Typ: boolean optional AdvancedMarkerElementOptions.gmpClickable ansehen. HTML-Attribut: gmp-clickable
gmpDraggable	Typ: boolean optional AdvancedMarkerElementOptions.gmpDraggable ansehen.
map	Typ: Map optional AdvancedMarkerElementOptions.map ansehen.
position attr: position	Typ: LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional AdvancedMarkerElementOptions.position ansehen. HTML-Attribut: position="lat,lng" position="lat,lng,altitude"
title attr: title	Typ: string AdvancedMarkerElementOptions.title ansehen. HTML-Attribut: title="string"
zIndex	Typ: number optional AdvancedMarkerElementOptions.zIndex ansehen.
element readonly	Verworfen: Verwenden Sie „AdvancedMarkerElement“ direkt. Typ: HTMLElement Dieses Feld ist schreibgeschützt. Das DOM-Element, das die Ansicht unterstützt.
content	Nicht mehr unterstützt: Verwenden Sie stattdessen .children. Typ: Node optional AdvancedMarkerElementOptions.content ansehen.

Methoden
addListener	addListener(eventName, handler) Parameter: eventName: string Beobachtetes Ereignis. handler: Function-Funktion zur Verarbeitung von Ereignissen. Rückgabewert: MapsEventListener Resultierender Event-Listener. Fügt die angegebene Listener-Funktion dem angegebenen Ereignisnamen im Maps-Ereignissystem hinzu.
Übernommen: addEventListener, removeEventListener

Ereignisse
click	function(event) Argumente: event: MapMouseEvent 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: event: MapMouseEvent Dieses Ereignis wird wiederholt ausgelöst, während der Nutzer das AdvancedMarkerElement zieht. Nicht verfügbar mit addEventListener().
dragend	function(event) Argumente: event: MapMouseEvent Dieses Ereignis wird ausgelöst, wenn der Nutzer das Ziehen des AdvancedMarkerElement beendet. Nicht verfügbar mit addEventListener().
dragstart	function(event) Argumente: event: MapMouseEvent Dieses Ereignis wird ausgelöst, wenn der Nutzer beginnt, das AdvancedMarkerElement zu ziehen. Nicht verfügbar mit addEventListener().
gmp-click	function(event) Argumente: event: AdvancedMarkerClickEvent 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.

Attribute
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	Typ: LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral 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. Wenn Sie Markierungen mit expliziter zIndex und Markierungen ohne explizite zIndex mischen, kann das zu unerwarteten visuellen Ergebnissen führen. Um ein vorhersehbares Verhalten zu gewährleisten, wird empfohlen, entweder den zIndex für alle Markierungen festzulegen oder ihn nicht festzulegen. 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

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

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

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

PinElement-Klasse

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

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.

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

Konstruktor
PinElement	PinElement([options]) Parameter: options: PinElementOptions optional

Attribute
background	Typ: string optional Die Hintergrundfarbe der Stecknadelform. PinElementOptions.background ansehen.
borderColor	Typ: string optional Die Rahmenfarbe der Stecknadelform. PinElementOptions.borderColor ansehen.
glyphColor	Typ: string optional Die Farbe des Symbols auf der Markierung. PinElementOptions.glyphColor ansehen.
glyphSrc	Typ: URL|string optional Die Quelle des Glyphenbilds, das in der Markierung angezeigt werden soll. PinElementOptions.glyphSrc ansehen.
glyphText	Typ: string optional Der Text, der in der Stecknadel angezeigt wird. PinElementOptions.glyphText ansehen.
scale	Typ: number optional PinElementOptions.scale ansehen.
element readonly	Verworfen: Verwenden Sie stattdessen „PinElement“. Typ: HTMLElement Dieses Feld ist schreibgeschützt. Das DOM-Element, das die Ansicht unterstützt.
glyph	Nicht mehr unterstützt: Verwenden Sie stattdessen PinElementOptions.glyphText oder PinElementOptions.glyphSrc. Typ: string|Element|URL optional PinElementOptions.glyph ansehen.

Methoden
Übernommen: addEventListener, removeEventListener

PinElementOptions-Schnittstelle

Schnittstelle google.maps.marker.PinElementOptions

Optionen zum Erstellen eines PinElement.

Attribute
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	Nicht mehr unterstützt: Verwenden Sie stattdessen PinElementOptions.glyphText oder PinElementOptions.glyphSrc. 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.