3D Maps

Klasse Map3DElement

google.maps.maps3d.Map3DElement Kurs

„Map3DElement“ ist eine HTML-Benutzeroberfläche für die 3D-Kartenansicht.

Benutzerdefiniertes Element:
<gmp-map-3d center="lat,lng,altitude" default-labels-disabled default-ui-disabled heading="number" max-altitude="number" max-heading="number" max-tilt="number" min-altitude="number" min-heading="number" min-tilt="number" range="number" roll="number" tilt="number"></gmp-map-3d>

Diese Klasse erweitert HTMLElement.

Mit dieser Klasse wird Map3DElementOptions implementiert.

Rufe const {Map3DElement} = await google.maps.importLibrary("maps3d") auf, um auf die Daten zuzugreifen. Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.
Map3DElement
Map3DElement([options])
Parameter: 
bounds
Wenn diese Option festgelegt ist, wird die Position der Kamera auf die angegebenen Lat/Lng-Grenzwerte beschränkt. Objekte außerhalb der Begrenzungen werden trotzdem gerendert. Mit Bounds können sowohl der Längengrad als auch der Breitengrad oder nur der Breitengrad oder der Längengrad eingeschränkt werden. Verwenden Sie für Grenzen, die nur Breitengrade umfassen, den West- und Ostlängengrad -180 bzw. 180. Verwenden Sie für Begrenzungen, die nur den Längengrad betreffen, die nördlichen bzw. südlichen Breitengrade von 90 bzw. -90.
center
Der Mittelpunkt der Karte als LatLngAltitude, wobei die Höhe in Metern über dem Meeresspiegel angegeben ist. Das ist nicht unbedingt der Ort, an dem sich die Kamera befindet, da das Feld range die Entfernung der Kamera vom Kartenmittelpunkt beeinflusst. Enthält standardmäßig den Wert {lat: 0, lng: 0, altitude: 63170000}, wenn nichts anderes festgelegt wird. 63.170.000 Meter ist die maximal zulässige Höhe (Erdradius multipliziert mit 10).
HTML-Attribut:
  • <gmp-map-3d center="lat,lng,altitude"></gmp-map-3d>
defaultLabelsDisabled
Typ:  boolean optional
Standard: false
Bei true werden keine Standardlabels für Karten gerendert.
HTML-Attribut:
  • <gmp-map-3d default-labels-disabled></gmp-map-3d>
defaultUIDisabled
Typ:  boolean optional
Standard: false
Wenn true festgelegt ist, sind alle UI-Standardschaltflächen deaktiviert. Die Tastatur- und Gestensteuerung werden dadurch nicht deaktiviert.
HTML-Attribut:
  • <gmp-map-3d default-ui-disabled></gmp-map-3d>
heading
Typ:number optional
Die Kompassrichtung der Karte in Grad, wobei „geradeaus nach Norden“ 0 Grad entspricht. Wenn keine Neigung vorliegt, wird jede Rollung als Richtung interpretiert.
HTML-Attribut:
  • <gmp-map-3d heading="number"></gmp-map-3d>
maxAltitude
Typ:number optional
Die maximale Höhe über dem Boden, die auf der Karte angezeigt wird. Gültige Werte liegen zwischen 0 und 63170000 Metern (Erdkradius multipliziert mit 10).
HTML-Attribut:
  • <gmp-map-3d max-altitude="number"></gmp-map-3d>
maxHeading
Typ:  number optional
Der maximale Richtungswinkel (Drehung) der Karte. Ein gültiger Wert liegt zwischen 0 und 360 Grad. minHeading und maxHeading stellen ein Intervall von <= 360 Grad dar, in dem Richtungsbewegungen zulässig sind. Mit minHeading = 180 und maxHeading = 90 sind Überschriften in [0, 90] und Überschriften in [180, 360] zulässig. minHeading = 90 und maxHeading = 180 erlauben Überschriften in [90, 180].
HTML-Attribut:
  • <gmp-map-3d max-heading="number"></gmp-map-3d>
maxTilt
Typ:  number optional
Der maximale Einfallswinkel der Karte. Gültige Werte liegen zwischen 0 und 90 Grad.
HTML-Attribut:
  • <gmp-map-3d max-tilt="number"></gmp-map-3d>
minAltitude
Typ:number optional
Die minimale Höhe über dem Boden, die auf der Karte angezeigt wird. Gültige Werte liegen zwischen 0 und 63170000 Metern (Erdkradius multipliziert mit 10).
HTML-Attribut:
  • <gmp-map-3d min-altitude="number"></gmp-map-3d>
minHeading
Typ:  number optional
Der minimale Kurswinkel (Drehung) der Karte. Gültige Werte liegen zwischen 0 und 360 Grad. minHeading und maxHeading stellen ein Intervall von maximal 360 Grad dar, in dem Richtungsgesten zulässig sind. minHeading = 180 und maxHeading = 90 erlauben die Überschrift in [0, 90] und die Überschrift in [180, 360]. minHeading = 90 und maxHeading = 180 erlauben Überschriften in [90, 180].
HTML-Attribut:
  • <gmp-map-3d min-heading="number"></gmp-map-3d>
minTilt
Typ:  number optional
Der minimale Einfallswinkel der Karte. Gültige Werte liegen zwischen 0 und 90 Grad.
HTML-Attribut:
  • <gmp-map-3d min-tilt="number"></gmp-map-3d>
range
Typ:  number optional
Die Entfernung von der Kamera zum Mittelpunkt der Karte in Metern.
HTML-Attribut:
  • <gmp-map-3d range="number"></gmp-map-3d>
roll
Typ:number optional
Die Rollung der Kamera um den Blickvektor in Grad. Um Unklarheiten zu beseitigen, wird jede Rollbewegung als Richtung interpretiert, wenn keine Neigung vorhanden ist.
HTML-Attribut:
  • <gmp-map-3d roll="number"></gmp-map-3d>
tilt
Typ:  number optional
Die Neigung des Sichtvektors der Kamera in Grad. Ein Blickvektor, der direkt auf die Erde gerichtet ist, hat eine Neigung von 0 Grad. Ein von der Erde weg weisender Ansichtsvektor hätte eine Neigung von 180 Grad.
HTML-Attribut:
  • <gmp-map-3d tilt="number"></gmp-map-3d>
BetaaddEventListener
addEventListener(type, listener[, options])
Parameter: 
  • type:  string Ein String, der den Ereignistyp darstellt, auf den gewartet werden soll. Die Groß- und Kleinschreibung ist dabei zu beachten.
  • 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 Siehe Optionen. Bei benutzerdefinierten Ereignissen werden nur capture und passive unterstützt.
Rückgabewert: void
Hiermit wird eine Funktion eingerichtet, die aufgerufen wird, wenn das angegebene Ereignis an das Ziel gesendet wird. Weitere Informationen finden Sie unter addEventListener.
flyCameraAround
flyCameraAround(options)
Parameter: 
Rückgabewert: Keiner
Bei dieser Methode bewegt sich die Kamera für eine bestimmte Dauer um einen bestimmten Ort und führt in dieser Zeit die angegebene Anzahl von Umdrehungen aus.

Standardmäßig dreht sich die Kamera im Uhrzeigersinn. Bei einer negativen Zahl für Runden dreht sich die Kamera stattdessen gegen den Uhrzeigersinn.

Die Methode ist asynchron, da Animationen erst gestartet werden können, wenn die Karte zu einem bestimmten Mindestmaß geladen wurde. Die Methode wird zurückgegeben, sobald die Animation gestartet wurde.

Wenn die Anzahl der Umdrehungen null ist, findet kein Drehen statt und die Animation wird sofort nach dem Start beendet.
flyCameraTo
flyCameraTo(options)
Parameter: 
Rückgabewert: Keiner
Bei dieser Methode wird die Kamera über einen bestimmten Zeitraum parabolisch von der aktuellen Position zu einer bestimmten Endposition bewegt.

Die Methode ist asynchron, da Animationen erst gestartet werden können, wenn die Karte zu einem bestimmten Mindestmaß geladen wurde. Die Methode wird zurückgegeben, sobald die Animation gestartet wurde.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Parameter: 
Rückgabewert: void
Entfernt einen zuvor mit addEventListener registrierten Ereignis-Listener aus dem Ziel. Siehe removeEventListener
stopCameraAnimation
stopCameraAnimation()
Parameter:Keine
Rückgabewert: Keiner
Diese Methode stoppt alle eventuell laufenden Fluganimationen. Die Kamera bleibt an der Position, an der sie sich während der Animation befindet. Sie wird nicht zum Endpunkt teleportiert.

Die Methode ist asynchron, da Animationen erst gestartet oder beendet werden können, nachdem die Karte einen Mindestbetrag geladen hat. Die Methode gibt einen Wert zurück, sobald die Animation beendet ist.
gmp-animationend
function(animationEndEvent)
Argumente: 
  • animationEndEvent:  Event
Dieses Ereignis wird ausgelöst, wenn die Fluganimation beendet ist. Dieses Ereignis wird durch den DOM-Baum weitergeleitet.
gmp-centerchange
function(centerChangeEvent)
Argumente: 
  • centerChangeEvent:  Event
Dieses Ereignis wird ausgelöst, wenn sich die „center“-Eigenschaft des Map3DElements ändert.
gmp-click
function(clickEvent)
Argumente: 
Dieses Ereignis wird ausgelöst, wenn auf das Element Map3DElement geklickt wird.
gmp-headingchange
function(headingChangeEvent)
Argumente: 
  • headingChangeEvent:  Event
Dieses Ereignis wird ausgelöst, wenn sich die Richtungseigenschaft des Map3DElements ändert.
gmp-rangechange
function(rangeChangeEvent)
Argumente: 
  • rangeChangeEvent:  Event
Dieses Ereignis wird ausgelöst, wenn sich das Attribut „Bereich“ des Map3DElements ändert.
gmp-rollchange
function(rollChangeEvent)
Argumente: 
  • rollChangeEvent:  Event
Dieses Ereignis wird ausgelöst, wenn sich die Roll-Eigenschaft des Map3DElements ändert.
gmp-steadychange
function(steadyChangeEvent)
Argumente: 
Dieses Ereignis wird ausgelöst, wenn sich der stabile Zustand von Map3DElement ändert.
gmp-tiltchange
function(tiltChangeEvent)
Argumente: 
  • tiltChangeEvent:  Event
Dieses Ereignis wird ausgelöst, wenn sich die Neigungseigenschaft des Map3DElements ändert.

Map3DElementOptions-Schnittstelle

google.maps.maps3d.Map3DElementOptions-Benutzeroberfläche

Das Map3DElementOptions-Objekt wird verwendet, um die Eigenschaften zu definieren, die für ein Map3DElement festgelegt werden können.
bounds optional
Map3DElement.bounds ansehen.
center optional
Map3DElement.center ansehen.
defaultLabelsDisabled optional
Typ:  boolean optional
Map3DElement.defaultLabelsDisabled ansehen.
defaultUIDisabled optional
Typ:  boolean optional
Map3DElement.defaultUIDisabled ansehen.
heading optional
Typ:  number optional
Map3DElement.heading ansehen.
maxAltitude optional
Typ:  number optional
Map3DElement.maxAltitude ansehen.
maxHeading optional
Typ:  number optional
Map3DElement.maxHeading ansehen.
maxTilt optional
Typ:number optional
Map3DElement.maxTilt ansehen.
minAltitude optional
Typ:  number optional
Map3DElement.minAltitude ansehen.
minHeading optional
Typ:  number optional
Map3DElement.minHeading ansehen.
minTilt optional
Typ:number optional
Map3DElement.minTilt ansehen.
range optional
Typ:  number optional
Map3DElement.range ansehen.
roll optional
Typ:  number optional
Map3DElement.roll ansehen.
tilt optional
Typ:  number optional
Map3DElement.tilt ansehen.

FlyAroundAnimationOptions-Schnittstelle

google.maps.maps3d.FlyAroundAnimationOptions-Schnittstelle

Anpassungsoptionen für die FlyCameraAround-Animation.
camera
Der zentrale Punkt, auf den die Kamera während der Orbit-Animation blicken soll. Die Kartenausrichtung ändert sich, während die Kamera um diesen Mittelpunkt kreist.
durationMillis optional
Typ:  number optional
Die Dauer der Animation in Millisekunden. Dies ist die Gesamtdauer der Animation, nicht die Dauer einer einzelnen Rotation.
rounds optional
Typ:  number optional
Die Anzahl der Umdrehungen, die in der angegebenen Dauer um den Mittelpunkt erfolgen sollen. Damit wird die Gesamtgeschwindigkeit der Drehung gesteuert. Wenn Sie eine negative Zahl an „rounds“ übergeben, dreht sich die Kamera entgegen dem Uhrzeigersinn statt im Standardfall im Uhrzeigersinn.

Benutzeroberfläche FlyToAnimationOptions

google.maps.maps3d.FlyToAnimationOptions-Benutzeroberfläche

Anpassungsoptionen für die FlyCameraTo-Animation.
endCamera
Der Ort, auf den die Kamera am Ende der Animation zeigen soll.
durationMillis optional
Typ:  number optional
Dauer der Animation in Millisekunden. Bei einer Dauer von 0 wird die Kamera direkt zur Endposition teleportiert.

CameraOptions erstellen.

google.maps.maps3d.CameraOptions-Benutzeroberfläche

Mit dem CameraOptions-Objekt werden die Eigenschaften definiert, die für ein Kameraobjekt festgelegt werden können. Das Kameraobjekt kann alles sein, was eine Kameraposition hat, z.B. ein aktueller Kartenstatus oder ein zukünftiger angeforderter Animationsstatus.
center optional
Map3DElement.center ansehen.
heading optional
Typ:  number optional
Map3DElement.heading ansehen.
range optional
Typ:  number optional
Map3DElement.range ansehen.
roll optional
Typ:  number optional
Map3DElement.roll ansehen.
tilt optional
Typ:number optional
Map3DElement.tilt ansehen.

Klasse SteadyChangeEvent

google.maps.maps3d.SteadyChangeEvent-Klasse

Dieses Ereignis wird durch das Überwachen eines stabilen Zustands von Map3DElement erstellt. Dieses Ereignis tritt im DOM-Baum ein.

Diese Klasse erweitert Event.

Rufe const {SteadyChangeEvent} = await google.maps.importLibrary("maps3d") auf, um auf die Daten zuzugreifen. Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.
isSteady
Typ:  boolean
Gibt an, ob das Map3DElement stabil ist (d.h., ob das gesamte Rendering für die aktuelle Szene abgeschlossen ist) oder nicht.

LocationClickEvent-Klasse

google.maps.maps3d.LocationClickEvent Kurs

Dieses Ereignis wird durch Klicken auf ein Map3DElement erstellt.

Diese Klasse erweitert Event.

Rufe const {LocationClickEvent} = await google.maps.importLibrary("maps3d") auf, um auf die Daten zuzugreifen. Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.
position
Typ:  LatLngAltitude optional
Die geografische Breite/Länge/Höhe, die sich zum Zeitpunkt des Ereignisses unter dem Cursor befand. Bei gröberen Ebenen werden weniger genaue Daten zurückgegeben. Außerdem kann die Höhe des Meeresgrunds als Höhenwert zurückgegeben werden, wenn von einer höheren Kameraposition aus auf die Wasseroberfläche geklickt wird. Dieses Ereignis wird durch den DOM-Baum weitergeleitet.

Klasse PlaceClickEvent

google.maps.maps3d.PlaceClickEvent Kurs

Dieses Ereignis wird durch Klicken auf ein Map3DElement erstellt.

Diese Klasse erweitert LocationClickEvent.

Zugriff durch Aufrufen von const {PlaceClickEvent} = await google.maps.importLibrary("maps3d"). Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.
placeId
Typ:  string
Die Orts-ID des Kartenelements.
Übernommen:position
fetchPlace
fetchPlace()
Parameter:Keine
Rückgabewert: Promise<Place>
Ruft eine Place für diese Orts-ID ab Im resultierenden Place-Objekt wird die ID-Eigenschaft ausgefüllt. Zusätzliche Felder können anschließend über Place.fetchFields() angefordert werden, sofern die Places API aktiviert und die Abrechnung entsprechend eingerichtet ist. Das Promise wird abgelehnt, wenn beim Abrufen von Place ein Fehler aufgetreten ist.

Klasse Marker3DElement

google.maps.maps3d.Marker3DElement-Klasse

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

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

Diese Klasse erweitert HTMLElement.

Diese Klasse implementiert Marker3DElementOptions.

Rufe const {Marker3DElement} = await google.maps.importLibrary("maps3d") auf, um auf die Daten zuzugreifen. Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.
Marker3DElement
Marker3DElement([options])
Parameter: 
Erstellt eine Marker3DElement 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 mit einem anderen „Marker3DElement“ oder mit den Labels der Basiskarte kollidiert.
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. Wenn Sie eine Markierung extrudieren möchten, muss altitudeMode entweder RELATIVE_TO_GROUND oder ABSOLUTE sein.
HTML-Attribut:
  • <gmp-marker-3d extruded></gmp-marker-3d>
label
Typ:  string optional
Text, der bei dieser Markierung angezeigt werden soll.
HTML-Attribut:
  • <gmp-marker-3d label="string"></gmp-marker-3d>
position
Die Position der Spitze der Markierung. Die Höhe wird in bestimmten Modi ignoriert und ist daher optional.
sizePreserved
Typ:  boolean optional
Standard: false
Gibt an, ob diese Markierung unabhängig von der Entfernung zur Kamera ihre Größe beibehalten soll. Standardmäßig wird die Markierung anhand der Entfernung zur Kamera/Neigung skaliert.
HTML-Attribut:
  • <gmp-marker-3d size-preserved></gmp-marker-3d>
zIndex
Typ:  number optional
Der Z-Index im Vergleich zu anderen Markierungen.
HTML-Attribut:
  • <gmp-marker-3d z-index="number"></gmp-marker-3d>
default
Alle benutzerdefinierten Elemente, die dem Marker3DElement direkt hinzugefügt wurden, werden in die Steckplätze eingefügt. Zum Zeichnen von Markierungen werden jedoch nur Elemente vom Typ HTMLImageElement, SVGElement und PinElement verwendet. Andere Elemente werden ignoriert.
, HTMLImageElement und SVGElement müssen in ein <template>-Element eingehüllt 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- oder CSS-Klassen eingebettet ist, die Bildern hinzugefügt wurden, wird daher nicht angewendet und möglicherweise nicht berücksichtigt, wenn Markierungen auf dem Bildschirm angezeigt werden.
BetaaddEventListener
addEventListener(type, listener[, options])
Parameter: 
  • type:  string Ein String, der den Ereignistyp darstellt, auf den gewartet werden soll. Die Groß- und Kleinschreibung ist dabei zu beachten.
  • 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 Siehe Optionen. Bei benutzerdefinierten Ereignissen werden nur capture und passive unterstützt.
Rückgabewert: void
Hiermit wird eine Funktion eingerichtet, die aufgerufen wird, wenn das angegebene Ereignis an das Ziel gesendet wird. Weitere Informationen finden Sie unter addEventListener.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Parameter: 
  • type:  string Ein String, der den Typ des Ereignisses angibt, für das ein Event-Listener entfernt werden soll.
  • listener:  EventListener|EventListenerObject Der Event-Listener des Event-Handlers, der aus dem Ereignisziel entfernt werden soll.
  • options:  boolean|EventListenerOptions optional Optionen
Rückgabewert:  void
Entfernt einen zuvor mit addEventListener registrierten Ereignis-Listener aus dem Ziel. Weitere Informationen finden Sie unter removeEventListener.

Marker3DElementOptions-Benutzeroberfläche

google.maps.maps3d.Marker3DElementOptions-Schnittstelle

Das Objekt „Marker3DElementOptions“ wird verwendet, um die Eigenschaften zu definieren, die für ein „Marker3DElement“ festgelegt werden können.
altitudeMode optional
Typ:  AltitudeMode optional
Marker3DElement.altitudeMode ansehen.
collisionBehavior optional
Typ:  CollisionBehavior optional
Marker3DElement.collisionBehavior ansehen.
drawsWhenOccluded optional
Typ:  boolean optional
Marker3DElement.drawsWhenOccluded ansehen.
extruded optional
Typ:  boolean optional
Marker3DElement.extruded ansehen.
label optional
Typ:  string optional
Marker3DElement.label ansehen.
position optional
Marker3DElement.position ansehen.
sizePreserved optional
Typ:boolean optional
Marker3DElement.sizePreserved ansehen.
zIndex optional
Typ:  number optional
Marker3DElement.zIndex ansehen.

Klasse Marker3DInteractiveElement

google.maps.maps3d.Marker3DInteractiveElement Kurs

Zeigt eine Position auf einer 3D-Karte an. Die position muss festgelegt sein, damit die Marker3DInteractiveElement angezeigt wird. Im Gegensatz zu Marker3DElement empfängt Marker3DInteractiveElement ein gmp-click-Ereignis.

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

Diese Klasse erweitert Marker3DElement.

Mit dieser Klasse wird Marker3DInteractiveElementOptions implementiert.

Rufe const {Marker3DInteractiveElement} = await google.maps.importLibrary("maps3d") auf, um auf die Daten zuzugreifen. Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.
Marker3DInteractiveElement
Marker3DInteractiveElement([options])
Parameter: 
Erstellt einen Marker3DInteractiveElement mit den angegebenen Optionen.
Übernommen: altitudeMode, collisionBehavior, drawsWhenOccluded, extruded, label, position, sizePreserved, zIndex
default
Alle benutzerdefinierten Elemente, die der Marker3DInteractiveElement direkt hinzugefügt wurden, werden eingefügt. Zum Zeichnen von Markierungen werden jedoch nur Elemente vom Typ PinElement verwendet. Andere Elemente werden ignoriert.
addEventListener
addEventListener(type, listener[, options])
Parameter: 
  • type:  string Ein String, der den Ereignistyp darstellt, auf den gewartet werden soll. Die Groß- und Kleinschreibung ist dabei zu beachten.
  • 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 Siehe Optionen. Benutzerdefinierte Ereignisse unterstützen nur capture und passive.
Rückgabewert: void
Hiermit wird eine Funktion eingerichtet, die aufgerufen wird, wenn das angegebene Ereignis an das Ziel gesendet wird. Siehe addEventListener
removeEventListener
removeEventListener(type, listener[, options])
Parameter: 
  • type:  string Ein String, der den Typ des Ereignisses angibt, für das ein Event-Listener entfernt werden soll.
  • listener:  EventListener|EventListenerObject Der Event-Listener des Event-Handlers, der aus dem Ereignisziel entfernt werden soll.
  • options:  boolean|EventListenerOptions optional Optionen
Rückgabewert: void
Entfernt einen zuvor mit addEventListener registrierten Event-Listener aus dem Ziel. Siehe removeEventListener
gmp-click
function(clickEvent)
Argumente: 
Dieses Ereignis wird ausgelöst, wenn auf das Element Marker3DInteractiveElement geklickt wird.

Marker3DInteractiveElementOptions -Schnittstelle

google.maps.maps3d.Marker3DInteractiveElementOptions-Schnittstelle

Das Marker3DInteractiveElementOptions-Objekt, mit dem die Eigenschaften definiert werden, die für ein Marker3DInteractiveElement festgelegt werden können.

Diese Schnittstelle erweitert Marker3DElementOptions.

Übernommen: altitudeMode, collisionBehavior, drawsWhenOccluded, extruded, label, position, sizePreserved, zIndex

Klasse Model3DElement

google.maps.maps3d.Model3DElement Kurs

Ein 3D‑Modell, das das Rendern von glTF-Modellen ermöglicht. Beachten Sie, dass position und src festgelegt sein müssen, damit Model3DElement angezeigt wird.

Die Haupteigenschaften der gLTF PBR sollten unterstützt werden. Derzeit werden keine Erweiterungen oder Erweiterungseigenschaften unterstützt.

Benutzerdefiniertes Element:
<gmp-model-3d altitude-mode="absolute" src="src"></gmp-model-3d>

Diese Klasse erweitert HTMLElement.

Mit dieser Klasse wird Model3DElementOptions implementiert.

Rufe const {Model3DElement} = await google.maps.importLibrary("maps3d") auf, um auf die Daten zuzugreifen. Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.
Model3DElement
Model3DElement([options])
Parameter: 
Erstellt einen Model3DElement 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.

Die Drehungen werden in der folgenden Reihenfolge auf das Modell angewendet: Roll-, Neigungs- und dann Richtungswinkel.
position
Legt die Position von Model3DElement fest. Die Höhe wird in bestimmten Modi ignoriert und ist daher optional.
scale
Typ:  number|Vector3D|Vector3DLiteral optional
Standard: 1
Skaliert das Modell entlang der X-, Y- und Z-Achsen im Koordinatenraum des Modells.
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 Ihrer Hauptanwendung hosten, achten Sie darauf, die richtigen CORS-HTTP-Header einzurichten. Dadurch kann Ihre Anwendung sicher auf die Modelldateien aus der anderen Domain zugreifen.
HTML-Attribut:
  • <gmp-model-3d src="src"></gmp-model-3d>
BetaaddEventListener
addEventListener(type, listener[, options])
Parameter: 
  • type:  string Ein String, der den Ereignistyp darstellt, auf den gewartet werden soll. Die Groß- und Kleinschreibung ist dabei zu beachten.
  • 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 Siehe Optionen. Bei benutzerdefinierten Ereignissen werden nur capture und passive unterstützt.
Rückgabewert: void
Hiermit wird eine Funktion eingerichtet, die aufgerufen wird, wenn das angegebene Ereignis an das Ziel gesendet wird. Weitere Informationen finden Sie unter addEventListener.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Parameter: 
  • type:  string Ein String, der den Ereignistyp angibt, für den ein Event-Listener entfernt werden soll.
  • listener:  EventListener|EventListenerObject Der Event-Listener des Event-Handlers, der aus dem Ereignisziel entfernt werden soll.
  • options:  boolean|EventListenerOptions optional Siehe Optionen
Rückgabewert: void
Entfernt einen zuvor mit addEventListener registrierten Event-Listener aus dem Ziel. Siehe removeEventListener

Schnittstelle Model3DElementOptions

google.maps.maps3d.Model3DElementOptions-Benutzeroberfläche

Das Model3DElementOptions-Objekt wird verwendet, um die Eigenschaften zu definieren, die für ein Model3DElement festgelegt werden können.
altitudeMode optional
Typ:  AltitudeMode optional
Model3DElement.altitudeMode ansehen.
orientation optional
Model3DElement.orientation ansehen.
position optional
Model3DElement.position ansehen.
scale optional
Typ:  number|Vector3D|Vector3DLiteral optional
Model3DElement.scale ansehen.
src optional
Typ:  string|URL optional
Model3DElement.src ansehen.

Klasse Polyline3DElement

google.maps.maps3d.Polyline3DElement Kurs

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

Benutzerdefiniertes Element:
<gmp-polyline-3d altitude-mode="absolute" draws-occluded-segments extruded geodesic outer-color="string" outer-width="number" stroke-color="string" stroke-width="number" z-index="number"></gmp-polyline-3d>

Diese Klasse erweitert HTMLElement.

Mit dieser Klasse wird Polyline3DElementOptions implementiert.

Rufe const {Polyline3DElement} = await google.maps.importLibrary("maps3d") auf, um auf die Daten zuzugreifen. Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.
Polyline3DElement
Polyline3DElement([options])
Parameter: 
Erstellt einen Polyline3DElement 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>
coordinates
Die geordnete Reihenfolge der Koordinaten der Polylinie. Die Höhe wird in bestimmten Modi ignoriert und ist daher optional.
drawsOccludedSegments
Typ:  boolean optional
Standard: false
Gibt an, ob Teile der Polylinie, die verdeckt sein könnten, gezeichnet werden oder nicht. Polylinien können von Kartengeometrie (z. B. Gebäuden) 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 einen Polylinienzug 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
Bei true werden die Kanten der Polylinie als geodätisch interpretiert und folgen der Krümmung der Erde. Bei 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>
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>
BetaaddEventListener
addEventListener(type, listener[, options])
Parameter: 
  • type:  string Ein String, der den Ereignistyp darstellt, auf den gewartet werden soll. Die Groß- und Kleinschreibung ist dabei zu beachten.
  • 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 Siehe Optionen. Bei benutzerdefinierten Ereignissen werden nur capture und passive unterstützt.
Rückgabewert: void
Hiermit wird eine Funktion eingerichtet, die aufgerufen wird, wenn das angegebene Ereignis an das Ziel gesendet wird. Weitere Informationen finden Sie unter addEventListener.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Parameter: 
Rückgabewert:  void
Entfernt einen zuvor mit addEventListener registrierten Ereignis-Listener aus dem Ziel. Weitere Informationen finden Sie unter removeEventListener.

Polyline3DElementOptions -Schnittstelle

google.maps.maps3d.Polyline3DElementOptions-Benutzeroberfläche

Polyline3DElementOptions-Objekt, mit dem die Eigenschaften definiert werden, die für ein Polyline3DElement festgelegt werden können.
altitudeMode optional
Typ:  AltitudeMode optional
Polyline3DElement.altitudeMode ansehen.
coordinates optional
Polyline3DElement.coordinates ansehen.
drawsOccludedSegments optional
Typ:boolean optional
Polyline3DElement.drawsOccludedSegments ansehen.
extruded optional
Typ:  boolean optional
Polyline3DElement.extruded ansehen.
geodesic optional
Typ:  boolean optional
Polyline3DElement.geodesic ansehen.
outerColor optional
Typ:  string optional
Polyline3DElement.outerColor ansehen.
outerWidth optional
Typ:number optional
Polyline3DElement.outerWidth ansehen.
strokeColor optional
Typ:  string optional
Polyline3DElement.strokeColor ansehen.
strokeWidth optional
Typ:number optional
Polyline3DElement.strokeWidth ansehen.
zIndex optional
Typ:  number optional
Polyline3DElement.zIndex ansehen.

Klasse Polygon3DElement

google.maps.maps3d.Polygon3DElement Kurs

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

Benutzerdefiniertes Element:
<gmp-polygon-3d altitude-mode="absolute" draws-occluded-segments extruded fill-color="string" geodesic stroke-color="string" stroke-width="number" z-index="number"></gmp-polygon-3d>

Diese Klasse erweitert HTMLElement.

Diese Klasse implementiert Polygon3DElementOptions.

Rufe const {Polygon3DElement} = await google.maps.importLibrary("maps3d") auf, um auf die Daten zuzugreifen. Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.
Polygon3DElement
Polygon3DElement([options])
Parameter: 
Erstellt einen Polygon3DElement 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 von Kartengeometrie (z.B. Gebäuden) 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. Wenn Sie ein Polygon extrudieren möchten, 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
Bei true werden die Kanten des Polygons als geodätisch interpretiert und folgen der Krümmung der Erde. Bei false werden die Kanten des Polygons als gerade Linien im Bildschirmbereich gerendert.
HTML-Attribut:
  • <gmp-polygon-3d geodesic></gmp-polygon-3d>
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.
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.
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>
BetaaddEventListener
addEventListener(type, listener[, options])
Parameter: 
  • type:  string Ein String, der den Ereignistyp darstellt, auf den gewartet werden soll. Die Groß- und Kleinschreibung ist dabei zu beachten.
  • 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 Siehe Optionen. Bei benutzerdefinierten Ereignissen werden nur capture und passive unterstützt.
Rückgabewert: void
Hiermit wird eine Funktion eingerichtet, die aufgerufen wird, wenn das angegebene Ereignis an das Ziel gesendet wird. Weitere Informationen finden Sie unter addEventListener.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Parameter: 
Rückgabewert: void
Entfernt einen zuvor mit addEventListener registrierten Ereignis-Listener aus dem Ziel. Weitere Informationen finden Sie unter removeEventListener.

Polygon3DElementOptions-Schnittstelle

google.maps.maps3d.Polygon3DElementOptions-Schnittstelle

Mit dem Polygon3DElementOptions-Objekt werden die Eigenschaften definiert, die für ein Polygon3DElement festgelegt werden können.
altitudeMode optional
Typ:  AltitudeMode optional
Polygon3DElement.altitudeMode ansehen.
drawsOccludedSegments optional
Typ:  boolean optional
Polygon3DElement.drawsOccludedSegments ansehen.
extruded optional
Typ:  boolean optional
Polygon3DElement.extruded ansehen.
fillColor optional
Typ:  string optional
Polygon3DElement.fillColor ansehen.
geodesic optional
Typ:  boolean optional
Polygon3DElement.geodesic ansehen.
innerCoordinates optional
Polygon3DElement.innerCoordinates ansehen.
outerCoordinates optional
Polygon3DElement.outerCoordinates ansehen.
strokeColor optional
Typ:  string optional
Polygon3DElement.strokeColor ansehen.
strokeWidth optional
Typ:  number optional
Polygon3DElement.strokeWidth ansehen.
zIndex optional
Typ:  number optional
Polygon3DElement.zIndex ansehen.

Konstanten für AltitudeMode

google.maps.maps3d.AltitudeMode constants

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 Darstellung von Objekten relativ zum durchschnittlichen mittleren Meeresspiegel. Das bedeutet auch, dass sich die absolute Position des Objekts nicht ändert, wenn sich die Detailebene des Geländes darunter ändert.
CLAMP_TO_GROUND Ermöglicht die Darstellung von Objekten, die auf dem Boden liegen. Sie bleiben unabhängig von der angegebenen Höhe auf Bodenhöhe und folgen dem Gelände. Wenn sich das Objekt über einem großen Gewässer befindet, wird es auf Meereshöhe platziert.
RELATIVE_TO_GROUND Damit lassen sich Objekte relativ zur Bodenoberfläche darstellen. Wenn sich die Detailebene 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 von Boden, Gebäuden und Wasser. Bei Überflug über Wasser ist dies die Wasseroberfläche. Bei Überflug über Land ist dies die Gebäudeoberfläche (falls vorhanden) oder die Bodenoberfläche (falls keine Gebäude vorhanden sind).