3D Maps

Map3DElement-Klasse

google.maps.maps3d.Map3DElement Klasse

Map3DElement ist eine HTML-Schnittstelle für die 3D-Kartenansicht. Der mode muss festgelegt werden, damit die 3D-Karte gerendert wird.

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

Diese Klasse erweitert HTMLElement.

Diese Klasse implementiert Map3DElementOptions.

Zugriff durch Anrufen von const {Map3DElement} = await google.maps.importLibrary("maps3d").
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 Breiten-/Längengradgrenzen beschränkt. Objekte außerhalb der Grenzen werden weiterhin gerendert. Grenzen können sowohl den Längen- als auch den Breitengrad oder nur den Längen- oder Breitengrad einschränken. Verwenden Sie für nur auf den Breitengrad beschränkte Grenzen die westlichen und östlichen Längengrade von -180 bzw. 180. Verwenden Sie für reine Längengradgrenzen die nördlichen und südlichen Breitengrade 90 bzw. -90.
center
Die Mitte der Karte als LatLngAltitude, wobei die Höhe in Metern über dem Boden angegeben wird. 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>
defaultUIDisabled
Typ:boolean optional
Standard:false
Wenn true, sind alle standardmäßigen UI-Schaltflächen deaktiviert. Die Tastatur- und Gestensteuerung wird 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 Norden 0 ist. Wenn keine Neigung vorhanden ist, wird jede Drehung als Kurs 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. Ein gültiger Wert liegt zwischen 0 und 63170000 Metern (Erdradius multipliziert mit 10).
HTML-Attribut
  • <gmp-map-3d max-altitude="number"></gmp-map-3d>
maxHeading
Typ:number optional
Der maximale Winkel der Ausrichtung (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 Kursgesten zulässig sind. Mit minHeading = 180 und maxHeading = 90 können Sie Überschriften in [0, 90] und [180, 360] erstellen. minHeading = 90 und maxHeading = 180 ermöglichen die Überschrift in [90, 180].
HTML-Attribut
  • <gmp-map-3d max-heading="number"></gmp-map-3d>
maxTilt
Typ:number optional
Der maximale Einfallswinkel der Karte. Ein gültiger Wert liegt zwischen 0 und 90 Grad.
HTML-Attribut
  • <gmp-map-3d max-tilt="number"></gmp-map-3d>
minAltitude
Typ:number optional
Die Mindesthöhe über dem Boden, die auf der Karte angezeigt wird. Ein gültiger Wert liegt zwischen 0 und 63170000 Metern (Erdradius multipliziert mit 10).
HTML-Attribut
  • <gmp-map-3d min-altitude="number"></gmp-map-3d>
minHeading
Typ:number optional
Der minimale Winkel der Ausrichtung (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 Kursgesten zulässig sind. Mit minHeading = 180 und maxHeading = 90 können Sie Überschriften in [0, 90] und [180, 360] erstellen. minHeading = 90 und maxHeading = 180 ermöglichen die Überschrift in [90, 180].
HTML-Attribut
  • <gmp-map-3d min-heading="number"></gmp-map-3d>
minTilt
Typ:number optional
Der minimale Einfallswinkel der Karte. Ein gültiger Wert liegt zwischen 0 und 90 Grad.
HTML-Attribut
  • <gmp-map-3d min-tilt="number"></gmp-map-3d>
mode
Typ:MapMode optional
Gibt einen Modus an, in dem die Karte gerendert werden soll. Wenn sie nicht festgelegt ist, wird die Karte nicht gerendert.
HTML-Attribut
  • <gmp-map-3d mode="hybrid"></gmp-map-3d>
  • <gmp-map-3d mode="satellite"></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 Drehung der Kamera um den Ansichtsvektor in Grad. Um Unklarheiten zu vermeiden, wird jede Drehung als Kurs 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 Ansichtsvektor, der direkt nach unten auf die Erde gerichtet ist, hätte eine Neigung von null Grad. Ein Sichtvektor, der von der Erde weg zeigt, 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ß-/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.
flyCameraAround
flyCameraAround(options)
Parameter:
Rückgabewert:Keiner
Bei dieser Methode wird die Kamera für einen bestimmten Zeitraum um einen bestimmten Ort bewegt. Dabei wird die angegebene Anzahl von Umrundungen in diesem Zeitraum ausgeführt.

 Standardmäßig dreht sich die Kamera im Uhrzeigersinn. Wenn eine negative Zahl für die Anzahl der Umrundungen angegeben wird, bewegt sich die Kamera stattdessen im Uhrzeigersinn.

Die Methode ist asynchron, da Animationen erst gestartet werden können, wenn die Karte mindestens teilweise geladen wurde. Die Methode wird zurückgegeben, sobald die Animation gestartet wurde.

 Wenn die Anzahl der Drehungen null ist, erfolgt keine Drehung und die Animation wird sofort nach dem Start abgeschlossen.
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 mindestens teilweise geladen wurde. Die Methode wird zurückgegeben, sobald die Animation gestartet wurde.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Parameter:
Rückgabewert:void
Entfernt einen Event-Listener, der zuvor mit addEventListener für das Ziel registriert wurde. Siehe removeEventListener.
stopCameraAnimation
stopCameraAnimation()
Parameter:Keine
Rückgabewert:Keiner
Mit dieser Methode wird jede laufende Fly-Animation beendet. Die Kamera bleibt an der Position, an der sie sich gerade befindet, und wird nicht zum Endpunkt teleportiert.

Die Methode ist asynchron, da Animationen erst gestartet oder beendet werden können, wenn die Karte mindestens teilweise geladen wurde. Die Methode wird zurückgegeben, sobald die Animation beendet wurde.
gmp-animationend
function(animationEndEvent)
Argumente: 
  • animationEndEvent:  Event
Dieses Ereignis wird ausgelöst, wenn die Fly-Animation endet. Dieses Ereignis wird im DOM-Baum nach oben weitergegeben.
gmp-centerchange
function(centerChangeEvent)
Argumente: 
  • centerChangeEvent:  Event
Dieses Ereignis wird ausgelöst, wenn sich die „center“-Eigenschaft des Map3DElement ä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 heading-Eigenschaft des Map3DElement ändert.
gmp-rangechange
function(rangeChangeEvent)
Argumente: 
  • rangeChangeEvent:  Event
Dieses Ereignis wird ausgelöst, wenn sich die range-Eigenschaft des Map3DElement ändert.
gmp-rollchange
function(rollChangeEvent)
Argumente: 
  • rollChangeEvent:  Event
Dieses Ereignis wird ausgelöst, wenn sich die Roll-Eigenschaft des Map3DElement ändert.
gmp-steadychange
function(steadyChangeEvent)
Argumente: 
Dieses Ereignis wird ausgelöst, wenn sich der Steady State von Map3DElement ändert.
gmp-tiltchange
function(tiltChangeEvent)
Argumente: 
  • tiltChangeEvent:  Event
Dieses Ereignis wird ausgelöst, wenn sich die Neigungseigenschaft des Map3DElement ändert.

Map3DElementOptions-Schnittstelle

google.maps.maps3d.Map3DElementOptions-Schnittstelle

Map3DElementOptions-Objekt zum Definieren der Eigenschaften, die für ein Map3DElement festgelegt werden können.
bounds optional
Map3DElement.bounds ansehen.
center optional
Map3DElement.center 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.
mode optional
Typ:MapMode optional
Map3DElement.mode 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.

MapMode-Konstanten

google.maps.maps3d.MapMode Konstanten

Gibt einen Modus an, in dem die Karte gerendert werden soll.

Zugriff durch Anrufen von const {MapMode} = await google.maps.importLibrary("maps3d").
Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.
HYBRID In diesem Kartenmodus wird eine transparente Ebene mit wichtigen Straßen auf Satelliten- oder fotorealistischen Bildern angezeigt.
SATELLITE In diesem Kartenmodus werden Satellitenbilder oder, sofern verfügbar, fotorealistische Bilder angezeigt.

FlyAroundAnimationOptions Schnittstelle

google.maps.maps3d.FlyAroundAnimationOptions-Schnittstelle

Anpassungsoptionen für die Animation „FlyCameraAround“.
camera
Der Mittelpunkt, auf den die Kamera während der Orbit-Animation ausgerichtet sein soll. Die Ausrichtung der Karte ändert sich, wenn 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 Drehung.
rounds optional
Typ:number optional
Die Anzahl der Umdrehungen um das Zentrum innerhalb des angegebenen Zeitraums. Damit wird die Gesamtgeschwindigkeit der Drehung gesteuert. Wenn Sie eine negative Zahl an „rounds“ übergeben, dreht sich die Kamera gegen den Uhrzeigersinn anstatt im Uhrzeigersinn.

FlyToAnimationOptions-Schnittstelle

google.maps.maps3d.FlyToAnimationOptions-Schnittstelle

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

CameraOptions-Schnittstelle

google.maps.maps3d.CameraOptions-Schnittstelle

Das CameraOptions-Objekt wird verwendet, um die Eigenschaften zu definieren, 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.

SteadyChangeEvent-Klasse

google.maps.maps3d.SteadyChangeEvent Klasse

Dieses Ereignis wird durch die Überwachung eines stabilen Zustands von Map3DElement erstellt. Dieses Ereignis wird im DOM-Baum nach oben weitergegeben.

Diese Klasse erweitert Event.

Zugriff durch Anrufen von const {SteadyChangeEvent} = await google.maps.importLibrary("maps3d").
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 Rendern für die aktuelle Szene abgeschlossen ist) oder nicht.

Klasse LocationClickEvent

google.maps.maps3d.LocationClickEvent Klasse

Dieses Ereignis wird durch Klicken auf ein Map3DElement erstellt.

Diese Klasse erweitert Event.

Zugriff durch Anrufen von const {LocationClickEvent} = await google.maps.importLibrary("maps3d").
Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.
position
Typ:LatLngAltitude optional
Der Breitengrad, Längengrad und die Höhe, die sich unter dem Cursor befanden, als das Ereignis aufgetreten ist. Hinweis: Auf gröberen Ebenen werden weniger genaue Daten zurückgegeben. Außerdem kann die Höhe des Meeresbodens für den Höhenwert zurückgegeben werden, wenn Sie aus höheren Kamerapositionen auf die Wasseroberfläche klicken. Dieses Ereignis wird im DOM-Baum nach oben weitergegeben.

Klasse PlaceClickEvent

google.maps.maps3d.PlaceClickEvent Klasse

Dieses Ereignis wird erstellt, wenn Sie auf einer Map3DElement auf das Symbol für einen Ort klicken. Wenn Sie verhindern möchten, dass das Standard-Popover angezeigt wird, rufen Sie die Methode preventDefault() für dieses Ereignis auf, damit es nicht von Map3DElement verarbeitet wird.

Diese Klasse erweitert LocationClickEvent.

Zugriff durch Anrufen 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 Kartenmerkmals.
Übernommen:position
fetchPlace
fetchPlace()
Parameter:Keine
Rückgabewert:Promise<Place>
Ruft ein Place für diese Orts-ID ab. Im resultierenden Place-Objekt wird die ID-Eigenschaft ausgefüllt. Zusätzliche Felder können später über Place.fetchFields() angefordert werden, sofern die normalen Voraussetzungen für die Aktivierung und Abrechnung der Places API erfüllt sind. Das Versprechen wird abgelehnt, wenn beim Abrufen der Place ein Fehler aufgetreten ist.

Klasse Marker3DElement

google.maps.maps3d.Marker3DElement Klasse

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

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 Anrufen 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 mit den angegebenen Optionen.
altitudeMode
Typ:AltitudeMode optional
Standard:AltitudeMode.CLAMP_TO_GROUND
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
Standard:CollisionBehavior.REQUIRED
Eine Enumeration, die angibt, wie sich ein Marker3DElement verhalten soll, wenn es sich mit einem anderen Marker3DElement oder mit den Grundkartenlabels ü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 die 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
Der Text, der von 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.
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 die Größe dieser Markierung unabhängig von der Entfernung von der Kamera beibehalten werden soll. Standardmäßig wird die Markierung basierend auf dem Abstand zur Kamera bzw. der 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. Allerdings werden 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 Standardslot von Marker3DElement zugewiesen werden.

Bilder und SVGs werden derzeit gerastert, bevor sie in der 3D-Szene gerendert werden. Daher wird benutzerdefiniertes HTML, das in SVG eingebettet ist, oder CSS-Klassen, die Bildern hinzugefügt werden, nicht angewendet und sind möglicherweise nicht sichtbar, 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ß-/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.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Parameter:
Rückgabewert:void
Entfernt einen Event-Listener, der zuvor mit addEventListener für das Ziel registriert wurde. Siehe removeEventListener.

Marker3DElementOptions interface

google.maps.maps3d.Marker3DElementOptions-Schnittstelle

Marker3DElementOptions-Objekt zum Definieren der Eigenschaften, 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