3D Maps

Map3DElement-Klasse

google.maps.maps3d.Map3DElement class
extends HTMLElement
implements Map3DElementOptions
library "maps3d"

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

                  
<gmp-map-3d
  autofits-camera-animation="value-name"
  camera-position="lat,lng,altitude"
  center="lat,lng,altitude"
  default-ui-hidden
  description="string"
  fov="number"
  gesture-handling="value-name"
  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="value-name"
  range="number"
  roll="number"
  tilt="number">
</gmp-map-3d>
const {Map3DElement} = await google.maps.importLibrary("maps3d");
Map3DElement
Map3DElement([options])
Parameter:
AlphaautofitsCameraAnimation
attr: autofits-camera-animation
Eingabetyp: AutofitsCameraAnimation optional
Ausgabetyp: AutofitsCameraAnimation optional
Standard: none
Die Animation, die für die automatische Kameraanpassung verwendet werden soll.
HTML-Attribut: autofits-camera-animation="value-name"
bounds
Eingabetyp: LatLngBounds|LatLngBoundsLiteral optional
Ausgabetyp: LatLngBounds 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.
cameraPosition
attr: camera-position
Eingabetyp: LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional
Ausgabetyp: LatLngAltitude optional
Die Position der Kamera, angegeben als LatLngAltitude. Wird abgeleitet, wenn nicht angegeben. Wenn center weggelassen, aber cameraPosition angegeben wird, wird center von cameraPosition. abgeleitet. Wenn beide in derselben Ausführungsschleife aktualisiert werden, wird cameraPosition bevorzugt. Die Felder cameraPosition und center können im Kontext der angegebenen gemeinsamen Richtung, des Bereichs, des Rollens und der Neigung eins zu eins voneinander abgeleitet werden.
HTML-Attribut: camera-position="lat,lng,altitude"
center
attr: center
Eingabetyp: LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional
Ausgabetyp: LatLngAltitude optional
Die Mitte der Karte als LatLngAltitude, wobei die Höhe in Metern über dem mittleren Meeresspiegel 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: center="lat,lng,altitude"
defaultUIHidden
attr: default-ui-hidden
Eingabetyp: boolean optional
Ausgabetyp: boolean
Standard: false
Wenn true, werden alle standardmäßigen UI-Schaltflächen ausgeblendet.
HTML-Attribut: default-ui-hidden
description
attr: description
Eingabetyp: string optional
Ausgabetyp: string optional
Falls angegeben, wird der Karte eine Beschreibung der Bedienungshilfen (z.B. für Screenreader) mit dem angegebenen Wert hinzugefügt.
HTML-Attribut: description="string"
fov
attr: fov
Eingabetyp: number optional
Ausgabetyp: number optional
Gibt das vertikale Sichtfeld in Grad an. Gültige Werte liegen zwischen 5,0 und 80,0. Höhere Werte vergrößern den sichtbaren Bereich, können aber zu perspektivischen Verzerrungen führen. Standard: 35.0.
HTML-Attribut: fov="number"
gestureHandling
attr: gesture-handling
Eingabetyp: GestureHandling optional
Ausgabetyp: GestureHandling
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: gesture-handling="value-name"
heading
attr: heading
Eingabetyp: number optional
Ausgabetyp: 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: heading="number"
internalUsageAttributionIds
attr: internal-usage-attribution-ids
Eingabetyp: Iterable<string> optional
Ausgabetyp: Array<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: internal-usage-attribution-ids="id1 id2"
language
Eingabetyp: string optional
Ausgabetyp: 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
attr: map-id
Eingabetyp: string optional
Ausgabetyp: string optional
Gibt eine Karten-ID an, die zum Abrufen des cloudbasierten Kartenstils für die Karte verwendet wird.
HTML-Attribut: map-id="string"
maxAltitude
attr: max-altitude
Eingabetyp: number optional
Ausgabetyp: 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: max-altitude="number"
maxHeading
attr: max-heading
Eingabetyp: number optional
Ausgabetyp: 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: max-heading="number"
maxTilt
attr: max-tilt
Eingabetyp: number optional
Ausgabetyp: number optional
Der maximale Einfallswinkel der Karte. Ein gültiger Wert liegt zwischen 0 und 90 Grad.
HTML-Attribut: max-tilt="number"
minAltitude
attr: min-altitude
Eingabetyp: number optional
Ausgabetyp: 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: min-altitude="number"
minHeading
attr: min-heading
Eingabetyp: number optional
Ausgabetyp: 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 Richtung [90, 180].
HTML-Attribut: min-heading="number"
minTilt
attr: min-tilt
Eingabetyp: number optional
Ausgabetyp: number optional
Der minimale Einfallswinkel der Karte. Ein gültiger Wert liegt zwischen 0 und 90 Grad.
HTML-Attribut: min-tilt="number"
mode
attr: mode
Eingabetyp: MapMode optional
Ausgabetyp: 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: mode="value-name"
range
attr: range
Eingabetyp: number optional
Ausgabetyp: number optional
Die Entfernung von der Kamera zum Mittelpunkt der Karte in Metern.
HTML-Attribut: range="number"
region
Eingabetyp: string optional
Ausgabetyp: 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
attr: roll
Eingabetyp: number optional
Ausgabetyp: 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: roll="number"
tilt
attr: tilt
Eingabetyp: number optional
Ausgabetyp: 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: tilt="number"
defaultUIDisabled
attr: default-ui-disabled
Typ: boolean optional
Standard: false
Wenn true, sind alle standardmäßigen UI-Schaltflächen deaktiviert. Tastatur und Gestensteuerung werden nicht deaktiviert.
HTML-Attribut: default-ui-disabled
flyCameraAround
flyCameraAround(options)
Parameter:
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.

Der Ort, um den die Kamera kreist, wird mit CameraOptions.center angegeben. Dieser Ort wird während der Orbit-Animation in der Mitte des Darstellungsbereichs angezeigt, während sich die Kamera um ihn herum 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.

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:
Rückgabewert: Keiner
Mit dieser Methode wird die Kamera parabolisch von der aktuellen Position zu einer bestimmten Endposition über eine bestimmte Dauer bewegt. Der Endstandort kann über CameraOptions.cameraPosition angegeben werden, wodurch die genaue Kameraposition gesteuert wird, oder über CameraOptions.center, wodurch die Mitte des sichtbaren Darstellungsbereichs der Karte gesteuert wird.

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.
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.
Übernommen: addEventListener, removeEventListener
gmp-animationend
function(animationEndEvent)
Argumente:
  • animationEndEvent: Event optional
Dieses Ereignis wird ausgelöst, wenn die Fluganimation endet. Dieses Ereignis wird im DOM-Baum nach oben weitergegeben.
gmp-camerapositionchange
function(cameraPositionChangeEvent)
Argumente:
  • cameraPositionChangeEvent: Event optional
Dieses Ereignis wird ausgelöst, wenn sich die Eigenschaft „cameraPosition“ des Map3DElement ändert.
gmp-centerchange
function(centerChangeEvent)
Argumente:
  • centerChangeEvent: Event optional
Dieses Ereignis wird ausgelöst, wenn sich die Eigenschaft „center“ des Map3DElement ändert.
gmp-click
function(clickEvent)
Argumente:
Dieses Ereignis wird ausgelöst, wenn auf das Map3DElement-Element geklickt wird.
gmp-error
function(mapInitializationErrorEvent)
Argumente:
  • mapInitializationErrorEvent: Event optional
Dieses Ereignis wird ausgelöst, wenn die Karte nicht initialisiert werden kann.
gmp-fovchange
function(fovChangeEvent)
Argumente:
  • fovChangeEvent: Event optional
Dieses Ereignis wird ausgelöst, wenn sich die fov-Eigenschaft des Map3DElement ändert.
gmp-headingchange
function(headingChangeEvent)
Argumente:
  • headingChangeEvent: Event optional
Dieses Ereignis wird ausgelöst, wenn sich die Ausrichtungseigenschaft des Map3DElement ändert.
gmp-map-id-error
function(mapIdErrorEvent)
Argumente:
  • mapIdErrorEvent: Event optional
Dieses Ereignis wird ausgelöst, wenn das Attribut „mapId“ des Map3DElement ungültig ist.
gmp-rangechange
function(rangeChangeEvent)
Argumente:
  • rangeChangeEvent: Event optional
Dieses Ereignis wird ausgelöst, wenn sich die Eigenschaft „range“ des Map3DElement ändert.
gmp-rollchange
function(rollChangeEvent)
Argumente:
  • rollChangeEvent: Event optional
Dieses Ereignis wird ausgelöst, wenn sich die Eigenschaft „roll“ des Map3DElement ä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 optional
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.

AlphaautofitsCameraAnimation
optional
bounds
optional
cameraPosition
optional
center
optional
defaultUIDisabled
optional
Typ: boolean optional
defaultUIHidden
optional
Typ: boolean optional
description
optional
Typ: string optional
fov
optional
Typ: number optional
gestureHandling
optional
Typ: GestureHandling optional
heading
optional
Typ: number optional
internalUsageAttributionIds
optional
Typ: Iterable<string> optional
language
optional
Typ: string optional
mapId
optional
Typ: string optional
maxAltitude
optional
Typ: number optional
maxHeading
optional
Typ: number optional
maxTilt
optional
Typ: number optional
minAltitude
optional
Typ: number optional
minHeading
optional
Typ: number optional
minTilt
optional
Typ: number optional
mode
optional
Typ: MapMode optional
range
optional
Typ: number optional
region
optional
Typ: string optional
roll
optional
Typ: number optional
tilt
optional
Typ: number optional

MapMode-Konstanten

google.maps.maps3d.MapMode Konstanten
Bibliothek "maps3d"

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

Diese Konstanten können auch als Strings verwendet werden. In TypeScript werden die Stringliterale durch den Typ MapModeString definiert.

const {MapMode} = await google.maps.importLibrary("maps3d");
HYBRID In diesem Kartenmodus wird eine transparente Ebene mit wichtigen Straßen über Satelliten- oder fotorealistischen Bildern angezeigt.
AlphaROADMAP In diesem Kartenmodus wird eine normale Straßenkarte angezeigt.
SATELLITE In diesem Kartenmodus werden Satellitenbilder oder fotorealistische Bilder angezeigt, sofern verfügbar.

GestureHandling-Konstanten

google.maps.maps3d.GestureHandling Konstanten
Bibliothek "maps3d"

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

Diese Konstanten können auch als Strings verwendet werden. In TypeScript werden die Stringliterale durch den Typ GestureHandlingString definiert.

const {GestureHandling} = await google.maps.importLibrary("maps3d");
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.

AutofitsCameraAnimation-Konstanten

google.maps.maps3d.AutofitsCameraAnimation Konstanten
Bibliothek "maps3d"

Gibt an, wie sich die Kamera verhalten soll, wenn sie sich in eine neue Position bewegt, um sich entsprechend den aktivierten untergeordneten Elementen zu zentrieren.

Diese Konstanten können auch als Strings verwendet werden. In TypeScript werden die Stringliterale durch den Typ AutofitsCameraAnimationString definiert.

const {AutofitsCameraAnimation} = await google.maps.importLibrary("maps3d");
FLY_TO Fliegt zur neuen Position.
NONE Rastet ohne Animation an der neuen Position ein.

FlyAroundAnimationOptions-Schnittstelle

Schnittstelle google.maps.maps3d.FlyAroundAnimationOptions

Anpassungsoptionen für die Animation „FlyCameraAround“.

camera
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. Wenn „Number.Infinity“ übergeben wird, wird die Animation unendlich oft wiederholt.
rounds
optional
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.

endCamera
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.

altitudeMode
optional
Typ: AltitudeMode optional
Ein Enum, das angibt, wie der Höhenwert des angegebenen CameraOptions-Objekts interpretiert werden soll. Dadurch wird die vorhandene AltitudeMode-ENUM wiederverwendet.
cameraPosition
optional
center
optional
fov
optional
Typ: number optional
heading
optional
Typ: number optional
range
optional
Typ: number optional
roll
optional
Typ: number optional
tilt
optional
Typ: number optional

Klasse SteadyChangeEvent

google.maps.maps3d.SteadyChangeEvent class
extends Event
library "maps3d"

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

const {SteadyChangeEvent} = await google.maps.importLibrary("maps3d");
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

google.maps.maps3d.LocationClickEvent class
extends Event
library "maps3d"

Dieses Ereignis wird durch Klicken auf ein Map3DElement erstellt.

const {LocationClickEvent} = await google.maps.importLibrary("maps3d");
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

google.maps.maps3d.PlaceClickEvent class
extends LocationClickEvent
library "maps3d"

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.

const {PlaceClickEvent} = await google.maps.importLibrary("maps3d");
placeId
Typ: string
Die Orts-ID des Kartenelements.
Übernommen: position
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.