3D Maps

Map3DElement-Klasse

Klasse google.maps.maps3d.Map3DElement

„Map3DElement“ ist eine HTML-Schnittstelle für die 3D-Kartenansicht. Beachten Sie, dass mode festgelegt sein muss, damit die 3D-Karte gerendert wird.

Benutzerdefiniertes Element:
<gmp-map-3d center="lat,lng,altitude" default-ui-hidden description="string" gesture-handling="auto" heading="number" internal-usage-attribution-ids="id1 id2" map-id="string" 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" default-ui-disabled></gmp-map-3d>

Diese Klasse erweitert HTMLElement.

Diese Klasse implementiert Map3DElementOptions.

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

Konstruktor
Map3DElement	Map3DElement([options]) Parameter:  options:  Map3DElementOptions optional

Attribute
bounds	Typ: LatLngBounds|LatLngBoundsLiteral optional Wenn festgelegt, wird die Position der Kamera innerhalb der angegebenen Lat/Lng-Grenzen eingeschränkt. Objekte außerhalb der Grenzen werden weiterhin gerendert. Die Grenzen können sowohl den Längen- als auch den Breitengrad oder nur den Breiten- oder Längengrad einschränken. Verwenden Sie für Grenzen, die nur den Breitengrad betreffen, die westlichen und östlichen Längengrade -180 bzw. 180. Verwenden Sie für Grenzen, die nur den Längengrad betreffen, den nördlichen und südlichen Breitengrad 90 bzw. -90.
center	Typ: LatLngAltitude|LatLngAltitudeLiteral optional Die Mitte der Karte, angegeben als „LatLngAltitude“, wobei die Höhe in Metern über dem Boden angegeben wird. Beachten Sie, dass sich die Kamera nicht unbedingt an dieser Position befindet, da das Feld range die Entfernung der Kamera vom Kartenmittelpunkt beeinflusst. Hat 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>
defaultUIHidden	Typ: boolean optional Standard: false Wenn true, werden alle standardmäßigen UI-Schaltflächen ausgeblendet. HTML-Attribut: <gmp-map-3d default-ui-hidden></gmp-map-3d>
description	Typ: string optional Falls angegeben, wird der Karte eine Beschreibung der Bedienungshilfen (z.B. für Screenreader) mit dem angegebenen Wert hinzugefügt. HTML-Attribut: <gmp-map-3d description="string"></gmp-map-3d>
gestureHandling	Typ: GestureHandling optional Standard: GestureHandling.GREEDY Steuert die kooperative Verarbeitung von Touch-Gesten. Wenn COOPERATIVE festgelegt ist, sind Modifikatortasten oder Zwei-Finger-Gesten erforderlich, um die Karte zu scrollen. Wenn GREEDY festgelegt ist, kann die Hostseite nicht über Nutzerereignisse auf dem Kartenelement gescrollt werden. Wenn die Richtlinie auf AUTO festgelegt ist, wird die Verarbeitung von Touch-Gesten durch die Scrollbarkeit der Hostseite bestimmt. HTML-Attribut: <gmp-map-3d gesture-handling="auto"></gmp-map-3d> <gmp-map-3d gesture-handling="cooperative"></gmp-map-3d> <gmp-map-3d gesture-handling="greedy"></gmp-map-3d>
heading	Typ: number optional Die Kompassrichtung der Karte in Grad, wobei Norden 0 ist. Wenn keine Neigung vorhanden ist, wird jede Rollbewegung als Kurs interpretiert. HTML-Attribut: <gmp-map-3d heading="number"></gmp-map-3d>
internalUsageAttributionIds	Typ: Iterable<string> optional Dem Initialisierer wird eine ID für die Nutzungszuordnung hinzugefügt. So kann Google besser nachvollziehen, welche Bibliotheken und Beispiele für Entwickler hilfreich sind, z. B. die Verwendung einer Bibliothek für Markierungscluster. Wenn Sie die ID für die Nutzungszuordnung nicht senden möchten, können Sie diese Property löschen. Es werden nur eindeutige Werte gesendet. Änderungen an diesem Wert nach der Instanziierung werden möglicherweise ignoriert. HTML-Attribut: <gmp-map-3d internal-usage-attribution-ids="id1 id2"></gmp-map-3d>
language	Typ: string optional Sprache, in der die Sprache der Basiskarte gerendert werden soll. Standardmäßig wird die Sprache verwendet, die vom Entwickler beim Laden der Maps JS API angefordert wurde.
mapId	Typ: string optional Gibt eine Karten-ID an, die zum Abrufen des cloudbasierten Kartenstils für die Karte verwendet wird. Diese Option sollte nicht festgelegt werden, nachdem die Karte initialisiert wurde. Daher wird die Karten-ID nur während der Initialisierung festgelegt und dieses Attribut nicht in öffentlich zugänglichen Kanälen veröffentlicht. HTML-Attribut: <gmp-map-3d map-id="string"></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 Kopfgesten zulässig sind. minHeading = 180 und maxHeading = 90 ermöglichen die Fahrt in Richtung [0, 90] und [180, 360]. minHeading = 90 und maxHeading = 180 ermöglichen die Fahrt 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 des Steuerkurses (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 Kopfgesten zulässig sind. minHeading = 180 und maxHeading = 90 ermöglichen die Fahrt in Richtung [0, 90] und [180, 360]. minHeading = 90 und maxHeading = 180 ermöglichen die Fahrt 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>
region	Typ: string optional Region, in der die POIs der Basiskarte gerendert werden sollen. Standardmäßig wird die Region verwendet, die der Entwickler beim Laden der Maps JS API angefordert hat.
roll	Typ: number optional Die Rollbewegung der Kamera um den Sichtvektor in Grad. Um Unklarheiten zu vermeiden, wird bei fehlender Neigung jede Rollbewegung als Kurs interpretiert. 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 null Grad. Ein Blickvektor, der von der Erde weg zeigt, hätte eine Neigung von 180 Grad. HTML-Attribut: <gmp-map-3d tilt="number"></gmp-map-3d>
defaultUIDisabled	Nicht mehr unterstützt: Verwenden Sie stattdessen Map3DElement.defaultUIHidden. Diese Property wird in einer zukünftigen Version entfernt. Typ: boolean optional Standard: false Wenn true, sind alle standardmäßigen UI-Schaltflächen deaktiviert. Tastatur und Gestensteuerung werden nicht deaktiviert. HTML-Attribut: <gmp-map-3d default-ui-disabled></gmp-map-3d>

Methoden
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.
flyCameraAround	flyCameraAround(options) Parameter:  options:  FlyAroundAnimationOptions Rückgabewert: Keiner Mit dieser Methode wird die Kamera für eine bestimmte Dauer um einen bestimmten Ort bewegt. Die Animation kann FlyAroundAnimationOptions.repeatCount-mal wiederholt werden. Die Kamera bewegt sich im Uhrzeigersinn. Die Methode ist asynchron, da Animationen erst gestartet werden können, wenn die Karte zu einem gewissen Grad geladen wurde. Die Methode gibt ein Ergebnis zurück, sobald die Animation gestartet wurde. Wenn die Anzahl der FlyAroundAnimationOptions.repeatCount-Drehungen null ist, wird keine Drehung ausgeführt und die Animation wird sofort nach dem Start beendet.
flyCameraTo	flyCameraTo(options) Parameter:  options:  FlyToAnimationOptions Rückgabewert: Keiner Mit dieser Methode wird die Kamera parabolisch von der aktuellen Position zu einer bestimmten Endposition über eine bestimmte Dauer bewegt. Die Methode ist asynchron, da Animationen erst gestartet werden können, wenn die Karte zu einem gewissen Grad geladen wurde. Die Methode gibt ein Ergebnis zurück, sobald die Animation gestartet wurde.
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.
stopCameraAnimation	stopCameraAnimation() Parameter: Keine Rückgabewert: Keiner Mit dieser Methode wird jede laufende Fluganimation gestoppt. Die Kamera bleibt an der Stelle, an der sie sich gerade befindet, und wird nicht zum Endpunkt teleportiert. Die Methode ist asynchron, da Animationen erst gestartet oder gestoppt werden können, wenn die Karte zu einem gewissen Grad geladen wurde. Die Methode wird zurückgegeben, sobald die Animation beendet wurde.

Ereignisse
gmp-animationend	function(animationEndEvent) Argumente:  animationEndEvent:  Event Dieses Ereignis wird ausgelöst, wenn die Fluganimation 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 Eigenschaft „center“ des Map3DElement ändert.
gmp-click	function(clickEvent) Argumente:  clickEvent:  LocationClickEvent|PlaceClickEvent Dieses Ereignis wird ausgelöst, wenn auf das Map3DElement-Element geklickt wird.
gmp-error	function(mapInitializationErrorEvent) Argumente:  mapInitializationErrorEvent:  Event Dieses Ereignis wird ausgelöst, wenn die Karte nicht initialisiert werden kann.
gmp-headingchange	function(headingChangeEvent) Argumente:  headingChangeEvent:  Event Dieses Ereignis wird ausgelöst, wenn sich die Ausrichtungseigenschaft des Map3DElement ändert.
gmp-map-id-error	function(mapIdErrorEvent) Argumente:  mapIdErrorEvent:  Event Dieses Ereignis wird ausgelöst, wenn das Attribut „mapId“ des Map3DElement ungültig ist.
gmp-rangechange	function(rangeChangeEvent) Argumente:  rangeChangeEvent:  Event Dieses Ereignis wird ausgelöst, wenn sich die Eigenschaft „range“ des Map3DElement ändert.
gmp-rollchange	function(rollChangeEvent) Argumente:  rollChangeEvent:  Event Dieses Ereignis wird ausgelöst, wenn sich die Eigenschaft „roll“ des Map3DElement ändert.
gmp-steadychange	function(steadyChangeEvent) Argumente:  steadyChangeEvent:  SteadyChangeEvent 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 Map3DElement ändert.

Map3DElementOptions-Schnittstelle

Schnittstelle google.maps.maps3d.Map3DElementOptions

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

Attribute
bounds optional	Typ: LatLngBounds|LatLngBoundsLiteral optional Map3DElement.bounds ansehen.
center optional	Typ: LatLngAltitude|LatLngAltitudeLiteral optional Map3DElement.center ansehen.
defaultUIDisabled optional	Nicht mehr unterstützt: Verwenden Sie stattdessen Map3DElement.defaultUIHidden. Diese Property wird in einer zukünftigen Version entfernt. Typ: boolean optional Map3DElement.defaultUIDisabled ansehen.
defaultUIHidden optional	Typ: boolean optional Map3DElement.defaultUIHidden ansehen.
description optional	Typ: string optional Map3DElement.description ansehen.
gestureHandling optional	Typ: GestureHandling optional Map3DElement.gestureHandling ansehen.
heading optional	Typ: number optional Map3DElement.heading ansehen.
internalUsageAttributionIds optional	Typ: Iterable<string> optional Map3DElement.internalUsageAttributionIds ansehen.
language optional	Typ: string optional Map3DElement.language ansehen.
mapId optional	Typ: string optional Map3DElement.mapId 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.
region optional	Typ: string optional Map3DElement.region 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 Aufrufen von const {MapMode} = await google.maps.importLibrary("maps3d").
Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.

Konstanten
HYBRID	In diesem Kartenmodus wird eine transparente Ebene mit wichtigen Straßen über Satelliten- oder fotorealistischen Bildern angezeigt.
SATELLITE	In diesem Kartenmodus werden Satellitenbilder oder fotorealistische Bilder angezeigt, sofern verfügbar.

GestureHandling-Konstanten

google.maps.maps3d.GestureHandling-Konstanten

Gibt an, wie Gestenereignisse für das Kartenelement verarbeitet werden sollen.

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

Konstanten
AUTO	So kann die Karte entscheiden, ob die kooperative oder die gierige Gestenverarbeitung verwendet werden soll. Dies ist das Standardverhalten, wenn nichts anderes angegeben ist. In diesem Fall wird die Karte in den kooperativen Modus versetzt, wenn sie das übergeordnete Scroll-Element (normalerweise die Hostseite) so dominiert, dass der Nutzer nicht von der Karte zu anderen Inhalten scrollen kann.
COOPERATIVE	Dadurch wird der kooperative Modus erzwungen, in dem Modifikatortasten oder Zweifingergesten zum Scrollen auf der Karte erforderlich sind.
GREEDY	Dadurch wird der Greedy-Modus erzwungen, in dem die Hostseite nicht über Nutzerereignisse auf dem Kartenelement gescrollt werden kann.

FlyAroundAnimationOptions-Schnittstelle

Schnittstelle google.maps.maps3d.FlyAroundAnimationOptions

Anpassungsoptionen für die Animation „FlyCameraAround“.

Attribute
camera	Typ: CameraOptions Der zentrale Punkt, auf den die Kamera während der Orbit-Animation gerichtet sein soll. Beachten Sie, dass sich die Ausrichtung der Karte ändert, wenn die Kamera um diesen Mittelpunkt kreist.
durationMillis optional	Typ: number optional Die Dauer eines Animationszyklus in Millisekunden.
repeatCount optional	Typ: number optional Gibt an, wie oft eine Animation wiederholt werden soll. Wenn die Zahl null ist, wird die Animation sofort nach dem Start abgeschlossen.
rounds optional	Nicht mehr unterstützt: Verwenden Sie stattdessen FlyAroundAnimationOptions.repeatCount. Typ: number optional Die Anzahl der Drehungen um den Mittelpunkt innerhalb der angegebenen Dauer. Damit wird die allgemeine Rotationsgeschwindigkeit gesteuert. Wenn Sie eine negative Zahl für „rounds“ übergeben, dreht sich die Kamera gegen den Uhrzeigersinn statt im Uhrzeigersinn.

FlyToAnimationOptions-Schnittstelle

Schnittstelle google.maps.maps3d.FlyToAnimationOptions

Anpassungsoptionen für die FlyCameraTo-Animation.

Attribute
endCamera	Typ: CameraOptions Der Ort, auf den die Kamera am Ende der Animation zeigen 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

Schnittstelle google.maps.maps3d.CameraOptions

CameraOptions-Objekt, mit dem die Attribute definiert werden, 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.

Attribute
center optional	Typ: LatLngAltitude|LatLngAltitudeLiteral 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

Klasse google.maps.maps3d.SteadyChangeEvent

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 Aufrufen von const {SteadyChangeEvent} = await google.maps.importLibrary("maps3d").
Weitere Informationen finden Sie unter Bibliotheken in der Maps JavaScript API.

Attribute
isSteady	Typ: boolean Gibt an, ob „Map3DElement“ stabil ist (d.h. das gesamte Rendering für die aktuelle Szene abgeschlossen ist) oder nicht.

LocationClickEvent-Klasse

Klasse google.maps.maps3d.LocationClickEvent

Dieses Ereignis wird durch Klicken auf ein Map3DElement erstellt.

Diese Klasse erweitert Event.

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

Attribute

position

Typ: LatLngAltitude optional Der Breiten-/Längen-/Höhengrad, der sich unter dem Cursor befand, als das Ereignis aufgetreten ist. Beachten Sie, dass auf gröberen Ebenen weniger genaue Daten zurückgegeben werden. Außerdem kann die Höhe des Meeresgrunds als Höhenwert zurückgegeben werden, wenn Sie von höheren Kamerapositionen aus auf die Wasseroberfläche klicken. Dieses Ereignis wird im DOM-Baum nach oben weitergegeben.

PlaceClickEvent-Klasse

Klasse google.maps.maps3d.PlaceClickEvent

Dieses Ereignis wird erstellt, wenn auf ein Ortssymbol in einem Map3DElement geklickt wird. 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 der Map3DElement verarbeitet wird.

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.

Attribute
placeId	Typ: string Die Orts-ID des Kartenelements.
Übernommen: position

Methoden

fetchPlace

fetchPlace() Parameter: Keine Rückgabewert: Promise<Place> Ruft ein Place für diese Orts-ID ab. Im resultierenden Place-Objekt wird das Attribut „id“ ausgefüllt. Zusätzliche Felder können anschließend über Place.fetchFields() angefordert werden. Hierfür gelten die normalen Aktivierungs- und Abrechnungsbedingungen der Places API. Das Promise wird abgelehnt, wenn beim Abrufen des Place ein Fehler aufgetreten ist.