Draw on the map

Klasse Marker3DElement

Klasse google.maps.maps3d.Marker3DElement

Zeigt eine Position auf einer 3D-Karte an. Beachten Sie, dass position festgelegt sein muss, damit Marker3DElement angezeigt wird.

Benutzerdefiniertes Element:
<gmp-marker-3d altitude-mode="absolute" collision-behavior="required" draws-when-occluded extruded label="string" position="lat,lng" size-preserved z-index="number"></gmp-marker-3d>

Diese Klasse erweitert HTMLElement.

Diese Klasse implementiert Marker3DElementOptions.

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

Marker3DElement
Marker3DElement([options])
Parameter: 
Erstellt ein Marker3DElement-Objekt mit den angegebenen Optionen.
altitudeMode
Typ: AltitudeMode optional
Gibt an, wie die Höhenkomponente der Position interpretiert wird.
HTML-Attribut:
  • <gmp-marker-3d altitude-mode="absolute"></gmp-marker-3d>
  • <gmp-marker-3d altitude-mode="clamp-to-ground"></gmp-marker-3d>
  • <gmp-marker-3d altitude-mode="relative-to-ground"></gmp-marker-3d>
  • <gmp-marker-3d altitude-mode="relative-to-mesh"></gmp-marker-3d>
collisionBehavior
Typ: CollisionBehavior optional
Eine Aufzählung, die angibt, wie sich ein Marker3DElement verhalten soll, wenn es sich mit einem anderen Marker3DElement oder mit den Labels der Basiskarte überschneidet.
HTML-Attribut:
  • <gmp-marker-3d collision-behavior="required"></gmp-marker-3d>
  • <gmp-marker-3d collision-behavior="required-and-hides-optional"></gmp-marker-3d>
  • <gmp-marker-3d collision-behavior="optional-and-hides-lower-priority"></gmp-marker-3d>
drawsWhenOccluded
Typ: boolean optional
Standard: false
Gibt an, ob diese Markierung gezeichnet werden soll, wenn sie verdeckt ist. Die Markierung kann durch Kartengeometrie (z.B. Gebäude) verdeckt werden.
HTML-Attribut:
  • <gmp-marker-3d draws-when-occluded></gmp-marker-3d>
extruded
Typ: boolean optional
Standard: false
Gibt an, ob die Markierung mit dem Boden verbunden werden soll. Damit eine Markierung extrudiert werden kann, muss altitudeMode entweder RELATIVE_TO_GROUND oder ABSOLUTE sein.
HTML-Attribut:
  • <gmp-marker-3d extruded></gmp-marker-3d>
label
Typ: string optional
Text, der von dieser Markierung angezeigt werden soll.
HTML-Attribut:
  • <gmp-marker-3d label="string"></gmp-marker-3d>
position
Die Position der Markierungsspitze. Die Höhe wird in bestimmten Modi ignoriert und ist daher optional.
HTML-Attribut:
  • <gmp-marker-3d position="lat,lng"></gmp-marker-3d>
  • <gmp-marker-3d position="lat,lng,altitude"></gmp-marker-3d>
sizePreserved
Typ: boolean optional
Standard: false
Gibt an, ob diese Markierung unabhängig von der Entfernung zur Kamera ihre Größe beibehalten soll oder nicht. Standardmäßig wird die Markierung basierend auf der Entfernung zur Kamera/Neigung skaliert.
HTML-Attribut:
  • <gmp-marker-3d size-preserved></gmp-marker-3d>
zIndex
Typ: number optional
Der zIndex im Vergleich zu anderen Markierungen.
HTML-Attribut:
  • <gmp-marker-3d z-index="number"></gmp-marker-3d>
default
Alle benutzerdefinierten Elemente, die direkt dem Marker3DElement hinzugefügt werden, werden eingefügt. Es werden jedoch nur Elemente der Typen HTMLImageElement, SVGElement und PinElement zum Zeichnen von Markierungen verwendet. Andere Elemente werden ignoriert.
HTMLImageElement und SVGElement müssen in ein <template>-Element eingeschlossen werden, bevor sie dem Standard-Slot von Marker3DElement zugewiesen werden.

Bilder und SVGs werden derzeit gerastert, bevor sie in der 3D-Szene gerendert werden. Benutzerdefiniertes HTML, das in SVG eingebettet ist, oder CSS-Klassen, die Bildern hinzugefügt wurden, werden daher nicht angewendet und sind möglicherweise nicht zu sehen, wenn Markierungen auf dem Bildschirm angezeigt werden.
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.

Marker3DElementOptions-Schnittstelle

Schnittstelle google.maps.maps3d.Marker3DElementOptions

Marker3DElementOptions-Objekt, mit dem die Eigenschaften definiert werden, die für ein Marker3DElement festgelegt werden können.

altitudeMode optional
Typ: AltitudeMode optional
collisionBehavior optional
Typ: CollisionBehavior optional
drawsWhenOccluded optional
Typ: boolean optional
extruded optional
Typ: boolean optional
label optional
Typ: string optional
position optional
sizePreserved optional
Typ: boolean optional
zIndex optional
Typ: number optional

Marker3DInteractiveElement-Klasse

Klasse google.maps.maps3d.Marker3DInteractiveElement

Zeigt eine Position auf einer 3D-Karte an. Beachten Sie, dass position festgelegt sein muss, damit Marker3DInteractiveElement angezeigt wird. Im Gegensatz zu Marker3DElement erhält Marker3DInteractiveElement ein gmp-click-Ereignis.

Benutzerdefiniertes Element:
<gmp-marker-3d-interactive gmp-popover-target="popover-id" title="string"></gmp-marker-3d-interactive>

Diese Klasse erweitert Marker3DElement.

Diese Klasse implementiert Marker3DInteractiveElementOptions.

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

Marker3DInteractiveElement
Marker3DInteractiveElement([options])
Parameter: 
Erstellt ein Marker3DInteractiveElement-Objekt mit den angegebenen Optionen.
gmpPopoverTargetElement
Typ: PopoverElement optional
Wenn diese Option festgelegt ist, wird das Popover-Element geöffnet, wenn auf diese Markierung geklickt wird.
HTML-Attribut:
  • <gmp-marker-3d-interactive gmp-popover-target="popover-id"></gmp-marker-3d-interactive>
title
Typ: string
Rollover-Text. Falls angegeben, wird der Marker3DInteractiveElement ein Text für Bedienungshilfen (z.B. für die Verwendung mit Screenreadern) mit dem angegebenen Wert hinzugefügt.
HTML-Attribut:
  • <gmp-marker-3d-interactive title="string"></gmp-marker-3d-interactive>
Übernommen: altitudeMode, collisionBehavior, drawsWhenOccluded, extruded, label, position, sizePreserved, zIndex
default
Alle benutzerdefinierten Elemente, die direkt dem Marker3DInteractiveElement hinzugefügt werden, werden eingefügt. Es werden jedoch nur Elemente vom Typ PinElement zum Zeichnen von Markierungen verwendet. Andere Elemente werden ignoriert.
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.
gmp-click
function(clickEvent)
Argumente: 
Dieses Ereignis wird ausgelöst, wenn auf das Marker3DInteractiveElement-Element geklickt wird.

Marker3DInteractiveElementOptions-Schnittstelle

Schnittstelle google.maps.maps3d.Marker3DInteractiveElementOptions

Das Marker3DInteractiveElementOptions-Objekt wird verwendet, um die Eigenschaften zu definieren, die für ein Marker3DInteractiveElement festgelegt werden können.

Diese Schnittstelle erweitert Marker3DElementOptions.

gmpPopoverTargetElement optional
Typ: PopoverElement optional
title optional
Typ: string optional
Übernommen: altitudeMode, collisionBehavior, drawsWhenOccluded, extruded, label, position, sizePreserved, zIndex

Model3DElement-Klasse

Klasse google.maps.maps3d.Model3DElement

Ein 3D-Modell, mit dem gLTF-Modelle gerendert werden können. Beachten Sie, dass position und src festgelegt sein müssen, damit Model3DElement angezeigt wird.

Die wichtigsten Eigenschaften von gLTF PBR sollten unterstützt werden. Derzeit werden keine Erweiterungen oder Erweiterungs-Properties unterstützt.

Benutzerdefiniertes Element:
<gmp-model-3d altitude-mode="absolute" orientation="heading,tilt,roll" position="lat,lng" scale="number" src="url"></gmp-model-3d>

Diese Klasse erweitert HTMLElement.

Diese Klasse implementiert Model3DElementOptions.

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

Model3DElement
Model3DElement([options])
Parameter: 
Erstellt ein Model3DElement-Objekt mit den angegebenen Optionen.
altitudeMode
Typ: AltitudeMode optional
Gibt an, wie die Höhe in der Position interpretiert wird.
HTML-Attribut:
  • <gmp-model-3d altitude-mode="absolute"></gmp-model-3d>
  • <gmp-model-3d altitude-mode="clamp-to-ground"></gmp-model-3d>
  • <gmp-model-3d altitude-mode="relative-to-ground"></gmp-model-3d>
  • <gmp-model-3d altitude-mode="relative-to-mesh"></gmp-model-3d>
orientation
Beschreibt die Drehung des Koordinatensystems eines 3D-Modells, um das Modell auf der 3D-Karte zu positionieren.

Drehungen werden in der folgenden Reihenfolge auf das Modell angewendet: Rollen, Neigen und dann Gieren.
HTML-Attribut:
  • <gmp-model-3d orientation="heading,tilt,roll"></gmp-model-3d>
position
Legt die Position des Model3DElement fest. Die Höhe wird in bestimmten Modi ignoriert und ist daher optional.
HTML-Attribut:
  • <gmp-model-3d position="lat,lng"></gmp-model-3d>
  • <gmp-model-3d position="lat,lng,altitude"></gmp-model-3d>
scale
Typ: number|Vector3D|Vector3DLiteral optional
Standard: 1
Skaliert das Modell entlang der x-, y- und z-Achse im Koordinatenraum des Modells.
HTML-Attribut:
  • <gmp-model-3d scale="number"></gmp-model-3d>
  • <gmp-model-3d scale="x,y,z"></gmp-model-3d>
src
Typ: string|URL optional
Gibt die URL des 3D-Modells an. Derzeit werden nur Modelle im .glb-Format unterstützt.

Alle relativen HTTP-URLs werden in die entsprechenden absoluten URLs aufgelöst.

Wenn Sie Ihre .glb-Modelldateien auf einer anderen Website oder einem anderen Server als Ihre Hauptanwendung hosten, müssen Sie die richtigen CORS-HTTP-Header einrichten. Dadurch kann Ihre Anwendung sicher auf die Modelldateien aus der anderen Domain zugreifen.
HTML-Attribut:
  • <gmp-model-3d src="url"></gmp-model-3d>
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.

Model3DElementOptions-Schnittstelle

Schnittstelle google.maps.maps3d.Model3DElementOptions

Model3DElementOptions-Objekt, mit dem die Eigenschaften definiert werden, die für ein Model3DElement festgelegt werden können.

altitudeMode optional
Typ: AltitudeMode optional
orientation optional
position optional
scale optional
Typ: number|Vector3D|Vector3DLiteral optional
src optional
Typ: string|URL optional

Model3DInteractiveElement-Klasse

Klasse google.maps.maps3d.Model3DInteractiveElement

Ein 3D-Modell, mit dem gLTF-Modelle gerendert werden können. Beachten Sie, dass position und src festgelegt sein müssen, damit Model3DElement angezeigt wird.

Die wichtigsten Eigenschaften von gLTF PBR sollten unterstützt werden. Derzeit werden keine Erweiterungen oder Erweiterungs-Properties unterstützt.

Im Gegensatz zu Model3DElement erhält Model3DInteractiveElement ein gmp-click-Ereignis.

Benutzerdefiniertes Element:
<gmp-model-3d-interactive></gmp-model-3d-interactive>

Diese Klasse erweitert Model3DElement.

Diese Klasse implementiert Model3DInteractiveElementOptions.

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

Model3DInteractiveElement
Model3DInteractiveElement([options])
Parameter: 
Erstellt ein Model3DInteractiveElement-Objekt mit den angegebenen Optionen.
Übernommen: altitudeMode, orientation, position, scale, src
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.
gmp-click
function(clickEvent)
Argumente: 
Dieses Ereignis wird ausgelöst, wenn auf das Model3DInteractiveElement-Element geklickt wird.

Model3DInteractiveElementOptions-Schnittstelle

Schnittstelle google.maps.maps3d.Model3DInteractiveElementOptions

Model3DInteractiveElementOptions-Objekt, mit dem die Eigenschaften definiert werden, die für ein Model3DInteractiveElement festgelegt werden können.

Diese Schnittstelle erweitert Model3DElementOptions.

Übernommen: altitudeMode, orientation, position, scale, src

Polyline3DElement-Klasse

Klasse google.maps.maps3d.Polyline3DElement

Eine 3D-Polylinie ist ein lineares Overlay, das aus verbundenen Liniensegmenten auf einer 3D-Karte besteht.

Benutzerdefiniertes Element:
<gmp-polyline-3d altitude-mode="absolute" draws-occluded-segments extruded geodesic outer-color="string" outer-width="number" path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..." stroke-color="string" stroke-width="number" z-index="number"></gmp-polyline-3d>

Diese Klasse erweitert HTMLElement.

Diese Klasse implementiert Polyline3DElementOptions.

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

Polyline3DElement
Polyline3DElement([options])
Parameter: 
Erstellt ein Polyline3DElement-Objekt mit den angegebenen Optionen.
altitudeMode
Typ: AltitudeMode optional
Gibt an, wie Höhenkomponenten in den Koordinaten interpretiert werden.
HTML-Attribut:
  • <gmp-polyline-3d altitude-mode="absolute"></gmp-polyline-3d>
  • <gmp-polyline-3d altitude-mode="clamp-to-ground"></gmp-polyline-3d>
  • <gmp-polyline-3d altitude-mode="relative-to-ground"></gmp-polyline-3d>
  • <gmp-polyline-3d altitude-mode="relative-to-mesh"></gmp-polyline-3d>
drawsOccludedSegments
Typ: boolean optional
Standard: false
Gibt an, ob Teile der Polylinie, die verdeckt sein könnten, gezeichnet werden oder nicht. Polylinien können durch Kartengeometrie (z.B. Gebäude) verdeckt werden.
HTML-Attribut:
  • <gmp-polyline-3d draws-occluded-segments></gmp-polyline-3d>
extruded
Typ: boolean optional
Standard: false
Gibt an, ob die Polylinie mit dem Boden verbunden werden soll. Wenn Sie eine Polylinie extrudieren möchten, muss altitudeMode entweder RELATIVE_TO_GROUND oder ABSOLUTE sein.
HTML-Attribut:
  • <gmp-polyline-3d extruded></gmp-polyline-3d>
geodesic
Typ: boolean optional
Standard: false
Wenn true, werden die Kanten der Polylinie als geodätisch interpretiert und folgen der Erdkrümmung. Wenn false, werden die Kanten der Polylinie als gerade Linien im Bildschirmbereich gerendert.
HTML-Attribut:
  • <gmp-polyline-3d geodesic></gmp-polyline-3d>
outerColor
Typ: string optional
Die äußere Farbe. Alle CSS3-Farben werden unterstützt.
HTML-Attribut:
  • <gmp-polyline-3d outer-color="string"></gmp-polyline-3d>
outerWidth
Typ: number optional
Die äußere Breite liegt zwischen 0.0 und 1.0. Dies ist ein Prozentsatz des strokeWidth.
HTML-Attribut:
  • <gmp-polyline-3d outer-width="number"></gmp-polyline-3d>
path
Die geordnete Reihenfolge der Koordinaten der Polylinie. Die Höhe wird in bestimmten Modi ignoriert und ist daher optional.
HTML-Attribut:
  • <gmp-polyline-3d path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."></gmp-polyline-3d>
strokeColor
Typ: string optional
Die Strichfarbe. Alle CSS3-Farben werden unterstützt.
HTML-Attribut:
  • <gmp-polyline-3d stroke-color="string"></gmp-polyline-3d>
strokeWidth
Typ: number optional
Die Linienstärke in Pixeln.
HTML-Attribut:
  • <gmp-polyline-3d stroke-width="number"></gmp-polyline-3d>
zIndex
Typ: number optional
Der zIndex im Vergleich zu anderen Polys.
HTML-Attribut:
  • <gmp-polyline-3d z-index="number"></gmp-polyline-3d>
coordinates
Die geordnete Reihenfolge der Koordinaten der Polylinie. Die Höhe wird in bestimmten Modi ignoriert und ist daher optional.
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.

Polyline3DElementOptions-Schnittstelle

Schnittstelle google.maps.maps3d.Polyline3DElementOptions

Das Polyline3DElementOptions-Objekt wird verwendet, um die Eigenschaften zu definieren, die für ein Polyline3DElement festgelegt werden können.

altitudeMode optional
Typ: AltitudeMode optional
coordinates optional
drawsOccludedSegments optional
Typ: boolean optional
extruded optional
Typ: boolean optional
geodesic optional
Typ: boolean optional
outerColor optional
Typ: string optional
outerWidth optional
Typ: number optional
strokeColor optional
Typ: string optional
strokeWidth optional
Typ: number optional
zIndex optional
Typ: number optional

Polyline3DInteractiveElement-Klasse

Klasse google.maps.maps3d.Polyline3DInteractiveElement

Eine 3D-Polylinie ist ein lineares Overlay, das aus verbundenen Liniensegmenten auf einer 3D-Karte besteht. Im Gegensatz zu Polyline3DElement erhält Polyline3DInteractiveElement ein gmp-click-Ereignis.

Benutzerdefiniertes Element:
<gmp-polyline-3d-interactive></gmp-polyline-3d-interactive>

Diese Klasse erweitert Polyline3DElement.

Diese Klasse implementiert Polyline3DInteractiveElementOptions.

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

Polyline3DInteractiveElement
Polyline3DInteractiveElement([options])
Parameter: 
Erstellt ein Polyline3DInteractiveElement-Objekt mit den angegebenen Optionen.
Übernommen: altitudeMode, drawsOccludedSegments, extruded, geodesic, outerColor, outerWidth, path, strokeColor, strokeWidth, zIndex, coordinates
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.
gmp-click
function(clickEvent)
Argumente: 
  • clickEvent:  LocationClickEvent Das Ereignisobjekt enthält die Koordinaten (Breitengrad, Längengrad, Höhe) des Klicks.
Dieses Ereignis wird ausgelöst, wenn auf das Polyline3DInteractiveElement-Element geklickt wird.

Polyline3DInteractiveElementOptions-Schnittstelle

Schnittstelle google.maps.maps3d.Polyline3DInteractiveElementOptions

Das Polyline3DInteractiveElementOptions-Objekt wird verwendet, um die Eigenschaften zu definieren, die für ein Polyline3DInteractiveElement festgelegt werden können.

Diese Schnittstelle erweitert Polyline3DElementOptions.

Übernommen: altitudeMode, coordinates, drawsOccludedSegments, extruded, geodesic, outerColor, outerWidth, strokeColor, strokeWidth, zIndex

Polygon3DElement-Klasse

Klasse google.maps.maps3d.Polygon3DElement

Ein 3D-Polygon (wie eine 3D-Polylinie) definiert eine Reihe verbundener Koordinaten in einer geordneten Reihenfolge. Außerdem bilden Polygone eine geschlossene Schleife und definieren einen gefüllten Bereich.

Benutzerdefiniertes Element:
<gmp-polygon-3d altitude-mode="absolute" draws-occluded-segments extruded fill-color="string" geodesic path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..." stroke-color="string" stroke-width="number" z-index="number"></gmp-polygon-3d>

Diese Klasse erweitert HTMLElement.

Diese Klasse implementiert Polygon3DElementOptions.

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

Polygon3DElement
Polygon3DElement([options])
Parameter: 
Erstellt ein Polygon3DElement-Objekt mit den angegebenen Optionen.
altitudeMode
Typ: AltitudeMode optional
Gibt an, wie Höhenkomponenten in den Koordinaten interpretiert werden.
HTML-Attribut:
  • <gmp-polygon-3d altitude-mode="absolute"></gmp-polygon-3d>
  • <gmp-polygon-3d altitude-mode="clamp-to-ground"></gmp-polygon-3d>
  • <gmp-polygon-3d altitude-mode="relative-to-ground"></gmp-polygon-3d>
  • <gmp-polygon-3d altitude-mode="relative-to-mesh"></gmp-polygon-3d>
drawsOccludedSegments
Typ: boolean optional
Standard: false
Gibt an, ob Teile des Polygons, die verdeckt sein könnten, gezeichnet werden oder nicht. Polygone können durch Kartengeometrie (z.B. Gebäude) verdeckt werden.
HTML-Attribut:
  • <gmp-polygon-3d draws-occluded-segments></gmp-polygon-3d>
extruded
Typ: boolean optional
Standard: false
Gibt an, ob das Polygon mit dem Boden verbunden werden soll. Um ein Polygon zu extrudieren, muss altitudeMode entweder RELATIVE_TO_GROUND oder ABSOLUTE sein.
HTML-Attribut:
  • <gmp-polygon-3d extruded></gmp-polygon-3d>
fillColor
Typ: string optional
Die Füllfarbe. Alle CSS3-Farben werden unterstützt.
HTML-Attribut:
  • <gmp-polygon-3d fill-color="string"></gmp-polygon-3d>
geodesic
Typ: boolean optional
Standard: false
Wenn true, werden die Kanten des Polygons als geodätisch interpretiert und folgen der Erdkrümmung. Wenn false, werden die Kanten des Polygons als gerade Linien im Bildschirmbereich gerendert.
HTML-Attribut:
  • <gmp-polygon-3d geodesic></gmp-polygon-3d>
innerPaths
Die geordnete Reihenfolge der Koordinaten, mit denen eine geschlossene Schlaufe beschrieben wird. Im Gegensatz zu Polylinien kann ein Polygon aus einem oder mehreren Pfaden bestehen, die mehrere Ausschnitte innerhalb des Polygons erzeugen.
path
Die geordnete Reihenfolge der Koordinaten, mit denen eine geschlossene Schlaufe beschrieben wird. Die Höhe wird in bestimmten Modi ignoriert und ist daher optional.
HTML-Attribut:
  • <gmp-polygon-3d path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."></gmp-polygon-3d>
strokeColor
Typ: string optional
Die Strichfarbe. Alle CSS3-Farben werden unterstützt.
HTML-Attribut:
  • <gmp-polygon-3d stroke-color="string"></gmp-polygon-3d>
strokeWidth
Typ: number optional
Die Linienstärke in Pixeln.
HTML-Attribut:
  • <gmp-polygon-3d stroke-width="number"></gmp-polygon-3d>
zIndex
Typ: number optional
Der zIndex im Vergleich zu anderen Polys.
HTML-Attribut:
  • <gmp-polygon-3d z-index="number"></gmp-polygon-3d>
outerCoordinates
Die geordnete Reihenfolge der Koordinaten, mit denen eine geschlossene Schlaufe beschrieben wird. Die Höhe wird in bestimmten Modi ignoriert und ist daher optional.
innerCoordinates
Die geordnete Reihenfolge der Koordinaten, mit denen eine geschlossene Schlaufe beschrieben wird. Im Gegensatz zu Polylinien kann ein Polygon aus einem oder mehreren Pfaden bestehen, die mehrere Ausschnitte innerhalb des Polygons erzeugen.
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.

Polygon3DElementOptions-Schnittstelle

Schnittstelle google.maps.maps3d.Polygon3DElementOptions

Das Polygon3DElementOptions-Objekt wird verwendet, um die Eigenschaften zu definieren, die für ein Polygon3DElement festgelegt werden können.

altitudeMode optional
Typ: AltitudeMode optional
drawsOccludedSegments optional
Typ: boolean optional
extruded optional
Typ: boolean optional
fillColor optional
Typ: string optional
geodesic optional
Typ: boolean optional
innerCoordinates optional
outerCoordinates optional
strokeColor optional
Typ: string optional
strokeWidth optional
Typ: number optional
zIndex optional
Typ: number optional

Polygon3DInteractiveElement-Klasse

Klasse google.maps.maps3d.Polygon3DInteractiveElement

Ein 3D-Polygon (wie eine 3D-Polylinie) definiert eine Reihe verbundener Koordinaten in einer geordneten Reihenfolge. Außerdem bilden Polygone eine geschlossene Schleife und definieren einen gefüllten Bereich. Im Gegensatz zu Polygon3DElement erhält Polygon3DInteractiveElement ein gmp-click-Ereignis.

Benutzerdefiniertes Element:
<gmp-polygon-3d-interactive></gmp-polygon-3d-interactive>

Diese Klasse erweitert Polygon3DElement.

Diese Klasse implementiert Polygon3DInteractiveElementOptions.

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

Polygon3DInteractiveElement
Polygon3DInteractiveElement([options])
Parameter: 
Erstellt ein Polygon3DInteractiveElement-Objekt mit den angegebenen Optionen.
Übernommen: altitudeMode, drawsOccludedSegments, extruded, fillColor, geodesic, innerPaths, path, strokeColor, strokeWidth, zIndex, outerCoordinates, innerCoordinates
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.
gmp-click
function(clickEvent)
Argumente: 
  • clickEvent:  LocationClickEvent Das Ereignisobjekt enthält die Koordinaten (Breitengrad, Längengrad, Höhe) des Klicks.
Dieses Ereignis wird ausgelöst, wenn auf das Polygon3DInteractiveElement-Element geklickt wird.

Polygon3DInteractiveElementOptions-Schnittstelle

Schnittstelle google.maps.maps3d.Polygon3DInteractiveElementOptions

Das Polygon3DInteractiveElementOptions-Objekt wird verwendet, um die Eigenschaften zu definieren, die für ein Polygon3DInteractiveElement festgelegt werden können.

Diese Schnittstelle erweitert Polygon3DElementOptions.

Übernommen: altitudeMode, drawsOccludedSegments, extruded, fillColor, geodesic, innerCoordinates, outerCoordinates, strokeColor, strokeWidth, zIndex

PopoverElement-Klasse

Klasse google.maps.maps3d.PopoverElement

Ein benutzerdefiniertes HTML-Element, das ein Popover rendert. Es sieht aus wie eine Sprechblase und ist oft mit einer Markierung verbunden.

Benutzerdefiniertes Element:
<gmp-popover altitude-mode="absolute" auto-pan-disabled light-dismiss-disabled open position-anchor="lat,lng"></gmp-popover>

Diese Klasse erweitert HTMLElement.

Diese Klasse implementiert PopoverElementOptions.

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

PopoverElement
PopoverElement([options])
Parameter: 
altitudeMode
Typ: AltitudeMode optional
Gibt an, wie die Höhenkomponente der Position interpretiert wird.
HTML-Attribut:
  • <gmp-popover altitude-mode="absolute"></gmp-popover>
  • <gmp-popover altitude-mode="clamp-to-ground"></gmp-popover>
  • <gmp-popover altitude-mode="relative-to-ground"></gmp-popover>
  • <gmp-popover altitude-mode="relative-to-mesh"></gmp-popover>
autoPanDisabled
Typ: boolean optional
Standard: false
Wenn „true“ festgelegt ist, wird das Schwenken der Karte deaktiviert, damit das Pop-over beim Öffnen vollständig sichtbar ist.
HTML-Attribut:
  • <gmp-popover auto-pan-disabled></gmp-popover>
lightDismissDisabled
Typ: boolean optional
Standard: false
Gibt an, ob dieses Popover „leicht geschlossen“ werden soll oder nicht. Das Verhalten „Light Dismiss“ ähnelt dem Festlegen des Attributs popover="auto", das Teil der Popover API des Browsers ist.
HTML-Attribut:
  • <gmp-popover light-dismiss-disabled></gmp-popover>
open
Typ: boolean optional
Standard: false
Gibt an, ob dieses Popover geöffnet sein soll oder nicht.
HTML-Attribut:
  • <gmp-popover open></gmp-popover>
positionAnchor
Die Position, an der dieses Popover angezeigt werden soll. Wenn das Popover an einer interaktiven Markierung verankert ist, wird stattdessen die Position der Markierung verwendet.
HTML-Attribut:
  • <gmp-popover position-anchor="lat,lng"></gmp-popover>
  • <gmp-popover position-anchor="lat,lng,altitude"></gmp-popover>
  • <gmp-popover position-anchor="marker-id"></gmp-popover>
default
Platziert den Slotted-Inhalt im Hauptbereich des Popovers.
header
Platziert den eingefügten Inhalt im Überschriftsbereich des Popovers.
--gmp-popover-max-width
Maximale Breite des Popovers, unabhängig von der Breite des Inhalts.
--gmp-popover-min-width
Mindestbreite des Pop-overs, unabhängig von der Breite des Inhalts. Wenn Sie diese Property verwenden, sollten Sie sie auf einen Wert festlegen, der kleiner als die Breite der Karte (in Pixeln) ist.
--gmp-popover-pixel-offset-x
Der Versatz der Spitze des Popovers auf der X-Achse in Pixeln vom Punkt auf der Karte, an dessen geografischen Koordinaten das Popover verankert ist.
--gmp-popover-pixel-offset-y
Der Versatz der Spitze des Popovers auf der y-Achse in Pixeln vom Punkt auf der Karte, an dessen geografischen Koordinaten das Popover verankert ist.
background-color
Die Hintergrundfarbe des Popovers. Weitere Informationen finden Sie in der background-color-Dokumentation. Beachten Sie, dass das Standard-Popover für Orte ebenfalls von dieser Property betroffen ist. Verwenden Sie gezielte CSS-Klassen oder Inline-Stile für benutzerdefinierte Pop-over, um zu vermeiden, dass das Standard-Pop-over für Orte formatiert wird.
border-radius
Der Rahmenradius des Pop-overs. Weitere Informationen finden Sie in der border-radius-Dokumentation. Beachten Sie, dass das Standard-Popover für Orte ebenfalls von dieser Property betroffen ist. Verwenden Sie gezielte CSS-Klassen oder Inline-Stile für benutzerdefinierte Pop-over, um zu vermeiden, dass das Standard-Pop-over für Orte formatiert wird.
box-shadow
Der Box-Shadow des Pop-overs. Weitere Informationen finden Sie in der box-shadow-Dokumentation. Beachten Sie, dass das Standard-Popover für Orte ebenfalls von dieser Property betroffen ist. Verwenden Sie gezielte CSS-Klassen oder Inline-Stile für benutzerdefinierte Pop-over, um zu vermeiden, dass das Standard-Pop-over für Orte formatiert wird.
color-scheme
Gibt an, in welchem Farbschema dieses Popover gerendert werden kann. Weitere Informationen finden Sie in der color-scheme-Dokumentation. Wenn nicht angegeben, werden standardmäßig die Farbschema-Einstellungen des Nutzers verwendet.
padding
Das Padding des Pop-overs. Weitere Informationen finden Sie in der padding-Dokumentation. Beachten Sie, dass das Standard-Popover für Orte ebenfalls von dieser Property betroffen ist. Verwenden Sie gezielte CSS-Klassen oder Inline-Stile für benutzerdefinierte Pop-over, um zu vermeiden, dass das Standard-Pop-over für Orte formatiert wird.
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.

PopoverElementOptions-Schnittstelle

Schnittstelle google.maps.maps3d.PopoverElementOptions

PopoverElementOptions-Objekt, mit dem die Eigenschaften definiert werden, die für ein PopoverElement festgelegt werden können.

altitudeMode optional
Typ: AltitudeMode optional
autoPanDisabled optional
Typ: boolean optional
lightDismissDisabled optional
Typ: boolean optional
open optional
Typ: boolean optional
positionAnchor optional

AltitudeMode-Konstanten

google.maps.maps3d.AltitudeMode-Konstanten

Gibt an, wie Höhenkomponenten in den Koordinaten interpretiert werden.

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

ABSOLUTE Ermöglicht die Angabe von Objekten relativ zum mittleren Meeresspiegel. Das bedeutet auch, dass die absolute Position des Objekts gleich bleibt, wenn sich der Detailgrad des Geländes unter dem Objekt ändert.
CLAMP_TO_GROUND Ermöglicht die Darstellung von Objekten, die auf dem Boden platziert sind. Sie bleiben unabhängig von der angegebenen Höhe auf Bodenhöhe und folgen dem Gelände. Wenn sich das Objekt über einem größeren Gewässer befindet, wird es auf Meereshöhe platziert.
RELATIVE_TO_GROUND Ermöglicht die Darstellung von Objekten relativ zur Erdoberfläche. Wenn sich der Detaillierungsgrad des Geländes ändert, bleibt die Position des Objekts relativ zum Boden konstant. Über Wasser wird die Höhe als Wert in Metern über dem Meeresspiegel interpretiert.
RELATIVE_TO_MESH Ermöglicht die Darstellung von Objekten relativ zur höchsten Oberfläche (Boden, Gebäude oder Wasseroberfläche). Über Wasser ist dies die Wasseroberfläche, über Gelände die Gebäudeoberfläche (falls vorhanden) oder die Bodenoberfläche (wenn keine Gebäude vorhanden sind).