3D Maps

Klasa Map3DElement

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

Map3DElement to interfejs HTML widoku mapy 3D. Pamiętaj, że aby rozpocząć renderowanie mapy 3D, musisz ustawić mode.

                  
<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])
Parametry:
AlphaautofitsCameraAnimation
attr: autofits-camera-animation
Typ danych wejściowych: AutofitsCameraAnimation optional
Typ danych wyjściowych: AutofitsCameraAnimation optional
Domyślnie: none
Animacja, która ma być używana do automatycznego dopasowywania kamery.
Atrybut HTML: autofits-camera-animation="value-name"
bounds
Typ danych wejściowych: LatLngBounds|LatLngBoundsLiteral optional
Typ danych wyjściowych: LatLngBounds optional
Jeśli jest ustawiona, ogranicza pozycję kamery do określonych granic szerokości i długości geograficznej. Pamiętaj, że obiekty poza granicami są nadal renderowane. Granice mogą ograniczać zarówno długość, jak i szerokość geograficzną, lub tylko jedną z nich. W przypadku granic obejmujących tylko szerokość geograficzną użyj długości geograficznej zachodniej i wschodniej odpowiednio -180 i 180. W przypadku granic obejmujących tylko długość geograficzną użyj szerokości geograficznej północnej i południowej odpowiednio 90 i -90.
cameraPosition
attr: camera-position
Typ danych wejściowych: LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional
Typ danych wyjściowych: LatLngAltitude optional
Pozycja kamery podana jako LatLngAltitude. Jeśli zostanie pominięty, zostanie wygenerowany. Jeśli parametr center zostanie pominięty, ale parametr cameraPosition zostanie określony, parametr center zostanie określony na podstawie parametru cameraPosition.. Jeśli oba parametry zostaną zaktualizowane w tej samej pętli, parametr cameraPosition będzie miał pierwszeństwo. Pola cameraPosition i center można wyprowadzić jedno z drugiego w kontekście danego wspólnego kierunku, zakresu, przechyłu i nachylenia.
Atrybut HTML: camera-position="lat,lng,altitude"
center
attr: center
Typ danych wejściowych: LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional
Typ danych wyjściowych: LatLngAltitude optional
Środek mapy podany jako LatLngAltitude, gdzie wysokość jest podana w metrach nad średnim poziomem morza. Pamiętaj, że nie musi to być miejsce, w którym znajduje się kamera, ponieważ pole range wpływa na odległość kamery od środka mapy. Jeśli nie jest ustawiony, przyjmuje się domyślnie {lat: 0, lng: 0, altitude: 63170000}. 63170000 metrów to maksymalna dozwolona wysokość (promień Ziemi pomnożony przez 10).
Atrybut HTML: center="lat,lng,altitude"
defaultUIHidden
attr: default-ui-hidden
Typ danych wejściowych: boolean optional
Typ danych wyjściowych: boolean
Domyślnie: false
Gdy true, wszystkie domyślne przyciski interfejsu są ukryte.
Atrybut HTML: default-ui-hidden
description
attr: description
Typ danych wejściowych: string optional
Typ danych wyjściowych: string optional
Jeśli podasz opis ułatwień dostępu (np. do użytku z czytnikami ekranu), zostanie on dodany do mapy z podaną wartością.
Atrybut HTML: description="string"
fov
attr: fov
Typ danych wejściowych: number optional
Typ danych wyjściowych: number optional
Określa pionowe pole widzenia w stopniach. Prawidłowe wartości mieszczą się w zakresie od 5,0 do 80,0. Wyższe wartości zwiększają widoczny obszar, ale mogą powodować zniekształcenia perspektywy. Domyślnie: 35,0.
Atrybut HTML: fov="number"
gestureHandling
attr: gesture-handling
Typ danych wejściowych: GestureHandling optional
Typ danych wyjściowych: GestureHandling
Kontroluje obsługę gestów kooperacyjnych. Gdy jest ustawiona wartość COOPERATIVE, do przewijania mapy wymagane są klawisze modyfikujące lub gesty dwoma palcami. Jeśli ustawisz wartość GREEDY, nie będzie można przewijać strony hosta za pomocą zdarzeń użytkownika w elemencie mapy. Jeśli ustawisz wartość AUTO, obsługa gestów będzie zależeć od możliwości przewijania strony hosta.
Atrybut HTML: gesture-handling="value-name"
heading
attr: heading
Typ danych wejściowych: number optional
Typ danych wyjściowych: number optional
Kierunek kompasu na mapie w stopniach, gdzie północ to zero. Jeśli nie ma przechylenia, każdy obrót będzie interpretowany jako kierunek.
Atrybut HTML: heading="number"
internalUsageAttributionIds
attr: internal-usage-attribution-ids
Typ danych wejściowych: Iterable<string> optional
Typ danych wyjściowych: Array<string> optional
Dodaje identyfikator atrybucji wykorzystania do inicjatora, co pomaga Google zrozumieć, które biblioteki i przykłady są przydatne dla deweloperów, np. wykorzystanie rozwiązania do łączenia znaczników w klastry. Aby zrezygnować z wysyłania identyfikatora atrybucji wykorzystania, możesz bezpiecznie usunąć tę właściwość. Wysyłane będą tylko unikalne wartości. Zmiany tej wartości po utworzeniu instancji mogą zostać zignorowane.
Atrybut HTML: internal-usage-attribution-ids="id1 id2"
language
Typ danych wejściowych: string optional
Typ danych wyjściowych: string optional
Język, w którym ma być renderowany język mapy podstawowej. Domyślnie będzie to język żądany przez dewelopera podczas wczytywania interfejsu Maps JavaScript API.
mapId
attr: map-id
Typ danych wejściowych: string optional
Typ danych wyjściowych: string optional
Określa identyfikator mapy, który będzie używany do pobierania stylu mapy w chmurze.
Atrybut HTML: map-id="string"
maxAltitude
attr: max-altitude
Typ danych wejściowych: number optional
Typ danych wyjściowych: number optional
Maksymalna wysokość nad ziemią, która będzie wyświetlana na mapie. Prawidłowa wartość mieści się w zakresie od 0 do 63170000 metrów (promień Ziemi pomnożony przez 10).
Atrybut HTML: max-altitude="number"
maxHeading
attr: max-heading
Typ danych wejściowych: number optional
Typ danych wyjściowych: number optional
Maksymalny kąt kierunku (obrotu) mapy. Prawidłowa wartość mieści się w zakresie od 0 do 360 stopni. minHeading i maxHeading reprezentują interwał <= 360 stopni, w którym gesty nagłówka będą dozwolone. minHeading = 180 i maxHeading = 90 pozwolą na nagłówek w [0, 90] i nagłówek w [180, 360]. minHeading = 90 i maxHeading = 180 pozwolą na kierowanie się w stronę: [90, 180].
Atrybut HTML: max-heading="number"
maxTilt
attr: max-tilt
Typ danych wejściowych: number optional
Typ danych wyjściowych: number optional
Maksymalny kąt padania mapy. Prawidłowa wartość mieści się w zakresie od 0 do 90 stopni.
Atrybut HTML: max-tilt="number"
minAltitude
attr: min-altitude
Typ danych wejściowych: number optional
Typ danych wyjściowych: number optional
Minimalna wysokość nad ziemią, która będzie wyświetlana na mapie. Prawidłowa wartość mieści się w zakresie od 0 do 63170000 metrów (promień Ziemi pomnożony przez 10).
Atrybut HTML: min-altitude="number"
minHeading
attr: min-heading
Typ danych wejściowych: number optional
Typ danych wyjściowych: number optional
Minimalny kąt kierunku (obrotu) mapy. Prawidłowa wartość mieści się w zakresie od 0 do 360 stopni. minHeading i maxHeading reprezentują interwał <= 360 stopni, w którym gesty nagłówka będą dozwolone. minHeading = 180 i maxHeading = 90 pozwolą na nagłówek w [0, 90] i nagłówek w [180, 360]. minHeading = 90 i maxHeading = 180 pozwolą na kierowanie się w stronę [90, 180].
Atrybut HTML: min-heading="number"
minTilt
attr: min-tilt
Typ danych wejściowych: number optional
Typ danych wyjściowych: number optional
Minimalny kąt padania na mapie. Prawidłowa wartość mieści się w zakresie od 0 do 90 stopni.
Atrybut HTML: min-tilt="number"
mode
attr: mode
Typ danych wejściowych: MapMode optional
Typ danych wyjściowych: MapMode optional
Określa tryb, w którym ma być renderowana mapa. Jeśli nie zostanie ustawiony, mapa nie będzie renderowana.
Atrybut HTML: mode="value-name"
range
attr: range
Typ danych wejściowych: number optional
Typ danych wyjściowych: number optional
Odległość od kamery do środka mapy w metrach.
Atrybut HTML: range="number"
region
Typ danych wejściowych: string optional
Typ danych wyjściowych: string optional
Region, w którym ma zostać podjęta próba wyrenderowania ciekawych miejsc na mapie podstawowej. Domyślnie będzie to region żądany przez dewelopera podczas wczytywania interfejsu Maps JavaScript API.
roll
attr: roll
Typ danych wejściowych: number optional
Typ danych wyjściowych: number optional
Przechylenie kamery wokół wektora widoku wyrażone w stopniach. Aby uniknąć niejednoznaczności, gdy nie ma przechylenia, każdy obrót będzie interpretowany jako kierunek.
Atrybut HTML: roll="number"
tilt
attr: tilt
Typ danych wejściowych: number optional
Typ danych wyjściowych: number optional
Nachylenie wektora widoku kamery w stopniach. Wektor widoku skierowany bezpośrednio w dół na Ziemię ma nachylenie 0 stopni. Wektor widoku skierowany od Ziemi miałby nachylenie 180 stopni.
Atrybut HTML: tilt="number"
defaultUIDisabled
attr: default-ui-disabled
Typ: boolean optional
Domyślnie: false
Gdy true, wszystkie domyślne przyciski interfejsu są wyłączone. Nie wyłącza klawiatury ani sterowania gestami.
Atrybut HTML: default-ui-disabled
flyCameraAround
flyCameraAround(options)
Parametry:
Zwracana wartość: brak
Ta metoda powoduje, że kamera porusza się po orbicie wokół danej lokalizacji przez określony czas. Animację można powtórzyć określoną liczbę razy (FlyAroundAnimationOptions.repeatCount).

Kamera będzie się obracać w prawo.

Lokalizacja, wokół której odbywa się ruch, jest określana za pomocą parametru CameraOptions.center. Jest to lokalizacja, która będzie wyświetlana na środku widocznego obszaru podczas animacji orbity, gdy kamera będzie się wokół niej poruszać.

Metoda jest asynchroniczna, ponieważ animacje mogą się rozpocząć dopiero po załadowaniu minimalnej ilości danych mapy. Metoda zwraca wartość po rozpoczęciu animacji.

Jeśli liczba obrotów FlyAroundAnimationOptions.repeatCount wynosi 0, obrót nie nastąpi, a animacja zakończy się natychmiast po rozpoczęciu.
flyCameraTo
flyCameraTo(options)
Parametry:
Zwracana wartość: brak
Ta metoda przesuwa kamerę parabolicznie z bieżącej lokalizacji do podanej lokalizacji końcowej w określonym czasie. Lokalizację końcową można określić za pomocą parametru CameraOptions.cameraPosition, który kontroluje dokładną pozycję kamery, lub parametru CameraOptions.center, który kontroluje widoczny środek widocznego obszaru mapy.

Metoda jest asynchroniczna, ponieważ animacje mogą się rozpocząć dopiero po załadowaniu minimalnej ilości danych mapy. Metoda zwraca wartość po rozpoczęciu animacji.
stopCameraAnimation
stopCameraAnimation()
Parametry: brak
Zwracana wartość: brak
Ta metoda zatrzymuje wszystkie animacje lotu, które mogą być uruchomione. Kamera pozostaje w miejscu, w którym znajduje się w połowie animacji, i nie teleportuje się do punktu końcowego.

Metoda jest asynchroniczna, ponieważ animacje mogą się rozpocząć lub zatrzymać dopiero po załadowaniu minimalnej ilości danych mapy. Metoda zwraca wartość po zatrzymaniu animacji.
Dziedziczone: addEventListener, removeEventListener
gmp-animationend
function(animationEndEvent)
Argumenty:
  • animationEndEvent: Event optional
To zdarzenie jest wywoływane po zakończeniu animacji przelotu. To zdarzenie jest przekazywane w górę drzewa DOM.
gmp-camerapositionchange
function(cameraPositionChangeEvent)
Argumenty:
  • cameraPositionChangeEvent: Event optional
To zdarzenie jest wywoływane, gdy zmienia się właściwość cameraPosition elementu Map3DElement.
gmp-centerchange
function(centerChangeEvent)
Argumenty:
  • centerChangeEvent: Event optional
To zdarzenie jest wywoływane, gdy zmienia się właściwość center elementu Map3DElement.
gmp-click
function(clickEvent)
Argumenty:
To zdarzenie jest wywoływane po kliknięciu elementu Map3DElement.
gmp-error
function(mapInitializationErrorEvent)
Argumenty:
  • mapInitializationErrorEvent: Event optional
To zdarzenie jest wywoływane, gdy nie uda się zainicjować mapy.
gmp-fovchange
function(fovChangeEvent)
Argumenty:
  • fovChangeEvent: Event optional
To zdarzenie jest wywoływane, gdy zmienia się właściwość fov elementu Map3DElement.
gmp-headingchange
function(headingChangeEvent)
Argumenty:
  • headingChangeEvent: Event optional
To zdarzenie jest wywoływane, gdy zmienia się właściwość heading elementu Map3DElement.
gmp-map-id-error
function(mapIdErrorEvent)
Argumenty:
  • mapIdErrorEvent: Event optional
To zdarzenie jest wywoływane, gdy właściwość mapId elementu Map3DElement jest nieprawidłowa.
gmp-rangechange
function(rangeChangeEvent)
Argumenty:
  • rangeChangeEvent: Event optional
To zdarzenie jest wywoływane, gdy zmienia się właściwość range elementu Map3DElement.
gmp-rollchange
function(rollChangeEvent)
Argumenty:
  • rollChangeEvent: Event optional
To zdarzenie jest wywoływane, gdy zmienia się właściwość roll elementu Map3DElement.
gmp-steadychange
function(steadyChangeEvent)
Argumenty:
To zdarzenie jest wywoływane, gdy zmienia się stan stabilny elementu Map3DElement.
gmp-tiltchange
function(tiltChangeEvent)
Argumenty:
  • tiltChangeEvent: Event optional
To zdarzenie jest wywoływane, gdy zmienia się właściwość tilt elementu Map3DElement.

Interfejs Map3DElementOptions

Interfejs google.maps.maps3d.Map3DElementOptions

Obiekt Map3DElementOptions służący do definiowania właściwości, które można ustawić w obiekcie Map3DElement.

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

Stałe MapMode

google.maps.maps3d.MapMode stałe
biblioteka "maps3d"

Określa tryb, w którym ma być renderowana mapa.

Te stałe mogą być też używane jako ciągi znaków. W języku TypeScript literały ciągów znaków są definiowane przez typ MapModeString.

const {MapMode} = await google.maps.importLibrary("maps3d");
HYBRID Ten tryb mapy wyświetla przezroczystą warstwę głównych ulic na zdjęciach satelitarnych lub fotorealistycznych.
AlphaROADMAP Ten tryb mapy wyświetla normalną mapę ulic.
SATELLITE Ten tryb mapy wyświetla zdjęcia satelitarne lub fotorealistyczne, jeśli są dostępne.

Stałe GestureHandling

google.maps.maps3d.GestureHandling stałe
biblioteka "maps3d"

Określa, jak zdarzenia gestów powinny być obsługiwane w elemencie mapy.

Te stałe mogą być też używane jako ciągi znaków. W języku TypeScript literały ciągów znaków są definiowane przez typ GestureHandlingString.

const {GestureHandling} = await google.maps.importLibrary("maps3d");
AUTO Dzięki temu mapa może wybrać, czy ma używać obsługi gestów w trybie współpracy czy w trybie zachłannym. Jest to działanie domyślne, jeśli nie określono inaczej.

Spowoduje to, że mapa przejdzie w tryb współpracy, jeśli mapa dominuje nad elementem nadrzędnym przewijania (zwykle stroną hosta) do tego stopnia, że użytkownik nie może przewinąć mapy do innych treści.
COOPERATIVE Wymusza to tryb współpracy, w którym do przewijania mapy wymagane są klawisze modyfikujące lub gesty dwoma palcami.
GREEDY Wymusza to tryb zachłanny, w którym nie można przewijać strony hosta za pomocą zdarzeń użytkownika w elemencie mapy.

AutofitsCameraAnimation – stałe

google.maps.maps3d.AutofitsCameraAnimation stałe
biblioteka "maps3d"

Określa, jak kamera powinna się zachowywać, gdy przemieszcza się na nową pozycję, aby wyśrodkować się zgodnie z wybranymi elementami podrzędnymi.

Te stałe mogą być też używane jako ciągi znaków. W języku TypeScript literały ciągów znaków są definiowane przez typ AutofitsCameraAnimationString.

const {AutofitsCameraAnimation} = await google.maps.importLibrary("maps3d");
FLY_TO Przelatuje do nowej pozycji.
NONE Przechodzi do nowej pozycji bez animacji.

FlyAroundAnimationOptions interfejs

Interfejs google.maps.maps3d.FlyAroundAnimationOptions

Opcje dostosowywania animacji FlyCameraAround.

camera
Punkt centralny, na który kamera powinna być skierowana podczas animacji orbity. Zwróć uwagę, że kierunek mapy będzie się zmieniać, gdy kamera będzie się obracać wokół tego punktu centralnego.
durationMillis
opcjonalne
Typ: number optional
Czas trwania jednego cyklu animacji w milisekundach.
repeatCount
opcjonalne
Typ: number optional
Określa liczbę powtórzeń animacji. Jeśli liczba wynosi 0, animacja zakończy się natychmiast po rozpoczęciu. Jeśli przekazana zostanie wartość Number.Infinity, animacja będzie powtarzana w nieskończoność.
rounds
opcjonalne
Typ: number optional
Liczba obrotów wokół środka w danym czasie. To ustawienie określa ogólną szybkość obracania. Przekazanie ujemnej liczby do parametru rounds spowoduje obrót aparatu w lewo, a nie w prawo (domyślnie).

Interfejs FlyToAnimationOptions

Interfejs google.maps.maps3d.FlyToAnimationOptions

Opcje dostosowywania animacji FlyCameraTo.

endCamera
Lokalizacja, na którą kamera powinna być skierowana na końcu animacji.
durationMillis
opcjonalne
Typ: number optional
Czas trwania animacji w milisekundach. Czas trwania 0 spowoduje natychmiastowe przeniesienie kamery do pozycji końcowej.

CameraOptions interface

Interfejs google.maps.maps3d.CameraOptions

Obiekt CameraOptions służy do definiowania właściwości, które można ustawić w obiekcie kamery. Obiekt kamery może być dowolnym elementem, który ma pozycję kamery, np. bieżącym stanem mapy lub przyszłym żądanym stanem animacji.

altitudeMode
opcjonalne
Typ: AltitudeMode optional
Typ wyliczeniowy określający sposób interpretacji wartości wysokości danego obiektu CameraOptions. Spowoduje to ponowne użycie istniejącego typu wyliczeniowego AltitudeMode.
cameraPosition
opcjonalne
center
opcjonalne
fov
opcjonalne
Typ: number optional
heading
opcjonalne
Typ: number optional
range
opcjonalne
Typ: number optional
roll
opcjonalne
Typ: number optional
tilt
opcjonalne
Typ: number optional

Klasa SteadyChangeEvent

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

To zdarzenie jest tworzone na podstawie monitorowania stanu stabilnego Map3DElement. To zdarzenie jest przekazywane w górę drzewa DOM.

const {SteadyChangeEvent} = await google.maps.importLibrary("maps3d");
isSteady
Typ: boolean
Wskazuje, czy element Map3DElement jest stabilny (tzn. czy zakończyło się renderowanie bieżącej sceny).

Klasa LocationClickEvent

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

To zdarzenie jest tworzone po kliknięciu elementu Map3DElement.

const {LocationClickEvent} = await google.maps.importLibrary("maps3d");
position
Typ: LatLngAltitude optional
Szerokość/długość geograficzna/wysokość, która znajdowała się pod kursorem w momencie wystąpienia zdarzenia. Pamiętaj, że na mniej szczegółowych poziomach zwracane dane będą mniej dokładne. W przypadku kliknięcia powierzchni wody z wyższych pozycji kamery jako wartość wysokości może zostać zwrócona wysokość dna morskiego. To zdarzenie jest przekazywane w górę drzewa DOM.

Klasa PlaceClickEvent

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

To wydarzenie jest tworzone po kliknięciu ikony miejsca na Map3DElement. Aby zapobiec wyświetlaniu domyślnego wyskakującego okienka, wywołaj metodę preventDefault() w tym zdarzeniu, aby zapobiec jego obsłudze przez Map3DElement.

const {PlaceClickEvent} = await google.maps.importLibrary("maps3d");
placeId
Typ: string
Identyfikator miejsca na mapie.
Dziedziczone: position
fetchPlace
fetchPlace()
Parametry: brak
Wartość zwracana: Promise<Place>
Pobiera Place dla tego identyfikatora miejsca. W powstałym obiekcie Place zostanie wypełniona właściwość id. O dodatkowe pola można później poprosić za pomocą Place.fetchFields(), pod warunkiem że interfejs Places API jest włączony i rozliczany w normalny sposób. Jeśli podczas pobierania Place wystąpi błąd, obietnica zostanie odrzucona.