3D Maps

Classe Map3DElement

Classe google.maps.maps3d.Map3DElement

Map3DElement é uma interface HTML para a visualização de mapa em 3D. O mode precisa ser definido para que o mapa 3D comece a ser renderizado.

Elemento personalizado:
<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>

Essa classe estende HTMLElement.

Essa classe implementa Map3DElementOptions.

Acesse ligando para const {Map3DElement} = await google.maps.importLibrary("maps3d").
Consulte Bibliotecas na API Maps JavaScript.

Map3DElement
Map3DElement([options])
Parâmetros: 
bounds
Quando definida, restringe a posição da câmera dentro dos limites de latitude/longitude especificados. Os objetos fora dos limites ainda são renderizados. Os limites podem restringir a longitude e a latitude ou apenas uma delas. Para limites somente de latitude, use as longitudes oeste e leste de -180 e 180, respectivamente. Para limites somente de longitude, use as latitudes norte e sul de 90 e -90, respectivamente.
center
O centro do mapa fornecido como LatLngAltitude, em que a altitude está em metros acima do nível do solo. Essa não é necessariamente a localização da câmera, já que o campo range afeta a distância da câmera em relação ao centro do mapa. Se não for definido, o padrão será {lat: 0, lng: 0, altitude: 63170000}. 63.170.000 metros é a altitude máxima permitida (raio da Terra multiplicado por 10).
Atributo HTML:
  • <gmp-map-3d center="lat,lng,altitude"></gmp-map-3d>
defaultUIHidden
Tipo:  boolean optional
Padrão: false
Quando true, todos os botões de interface padrão ficam ocultos.
Atributo HTML:
  • <gmp-map-3d default-ui-hidden></gmp-map-3d>
description
Tipo:  string optional
Se fornecida, uma descrição de acessibilidade (por exemplo, para uso com leitores de tela) será adicionada ao mapa com o valor fornecido.
Atributo HTML:
  • <gmp-map-3d description="string"></gmp-map-3d>
gestureHandling
Tipo:  GestureHandling optional
Controla o processamento cooperativo de gestos. Quando definido como COOPERATIVE, as teclas modificadoras ou os gestos com dois dedos são necessários para rolar o mapa. Quando definido como GREEDY, a página host não pode ser rolada por eventos do usuário no elemento do mapa. Quando definido como AUTO, o processamento de gestos é determinado pela capacidade de rolagem da página host.
Atributo HTML:
  • <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
Tipo:  number optional
A direção da bússola do mapa, em graus, em que o norte é zero. Quando não há inclinação, qualquer rotação é interpretada como direção.
Atributo HTML:
  • <gmp-map-3d heading="number"></gmp-map-3d>
internalUsageAttributionIds
Tipo:  Iterable<string> optional
Adiciona um ID de atribuição de uso ao inicializador, o que ajuda o Google a entender quais bibliotecas e exemplos são úteis para os desenvolvedores, como o uso de uma biblioteca de clustering de marcadores. Para desativar o envio do ID de atribuição de uso, é seguro excluir essa propriedade. Somente valores exclusivos serão enviados. As mudanças nesse valor após a instanciação podem ser ignoradas.
Atributo HTML:
  • <gmp-map-3d internal-usage-attribution-ids="id1 id2"></gmp-map-3d>
language
Tipo:  string optional
Idioma em que o mapa de base será renderizado. O padrão é o idioma solicitado pelo desenvolvedor ao carregar a API Maps JS.
mapId
Tipo:  string optional
Especifica um ID do mapa que será usado para buscar a estilização de mapas baseada na nuvem. Não defina essa propriedade depois que o mapa for inicializado. Por isso, garantimos que o mapId seja definido apenas durante a inicialização e não publicamos esse atributo em canais públicos.
Atributo HTML:
  • <gmp-map-3d map-id="string"></gmp-map-3d>
maxAltitude
Tipo:  number optional
A altitude máxima acima do solo que será mostrada no mapa. Um valor válido está entre 0 e 63170000 metros (raio da Terra multiplicado por 10).
Atributo HTML:
  • <gmp-map-3d max-altitude="number"></gmp-map-3d>
maxHeading
Tipo:  number optional
O ângulo máximo de direção (rotação) do mapa. Um valor válido está entre 0 e 360 graus. minHeading e maxHeading representam um intervalo de <= 360 graus em que os gestos com a cabeça serão permitidos. minHeading = 180 e maxHeading = 90 vão permitir o título em [0, 90] e em [180, 360]. minHeading = 90 e maxHeading = 180 vão permitir a direção em [90, 180].
Atributo HTML:
  • <gmp-map-3d max-heading="number"></gmp-map-3d>
maxTilt
Tipo:  number optional
O ângulo máximo de incidência do mapa. Um valor válido está entre 0 e 90 graus.
Atributo HTML:
  • <gmp-map-3d max-tilt="number"></gmp-map-3d>
minAltitude
Tipo:  number optional
A altitude mínima acima do solo que será exibida no mapa. Um valor válido está entre 0 e 63170000 metros (raio da Terra multiplicado por 10).
Atributo HTML:
  • <gmp-map-3d min-altitude="number"></gmp-map-3d>
minHeading
Tipo:  number optional
O ângulo mínimo de direção (rotação) do mapa. Um valor válido está entre 0 e 360 graus. minHeading e maxHeading representam um intervalo de <= 360 graus em que os gestos com a cabeça serão permitidos. minHeading = 180 e maxHeading = 90 vão permitir o título em [0, 90] e em [180, 360]. minHeading = 90 e maxHeading = 180 vão permitir a direção em [90, 180].
Atributo HTML:
  • <gmp-map-3d min-heading="number"></gmp-map-3d>
minTilt
Tipo:  number optional
O ângulo mínimo de incidência do mapa. Um valor válido está entre 0 e 90 graus.
Atributo HTML:
  • <gmp-map-3d min-tilt="number"></gmp-map-3d>
mode
Tipo:  MapMode optional
Especifica um modo em que o mapa deve ser renderizado. Se não for definido, o mapa não será renderizado.
Atributo HTML:
  • <gmp-map-3d mode="hybrid"></gmp-map-3d>
  • <gmp-map-3d mode="satellite"></gmp-map-3d>
range
Tipo:  number optional
A distância da câmera até o centro do mapa, em metros.
Atributo HTML:
  • <gmp-map-3d range="number"></gmp-map-3d>
region
Tipo:  string optional
Região em que os PDIs do mapa de base serão renderizados. O padrão será a região solicitada pelo desenvolvedor ao carregar a API Maps JS.
roll
Tipo:  number optional
A rotação da câmera em torno do vetor de visualização em graus. Para resolver ambiguidades, quando não há inclinação, qualquer rotação é interpretada como direção.
Atributo HTML:
  • <gmp-map-3d roll="number"></gmp-map-3d>
tilt
Tipo:  number optional
A inclinação do vetor de visualização da câmera em graus. Um vetor de visualização que aponta diretamente para a Terra tem uma inclinação de zero grau. Um vetor de visualização apontando para longe da Terra teria uma inclinação de 180 graus.
Atributo HTML:
  • <gmp-map-3d tilt="number"></gmp-map-3d>
defaultUIDisabled
Tipo:  boolean optional
Padrão: false
Quando true, todos os botões de interface padrão são desativados. Não desativa os controles de teclado e gestos.
Atributo HTML:
  • <gmp-map-3d default-ui-disabled></gmp-map-3d>
addEventListener
addEventListener(type, listener[, options])
Parâmetros: 
  • type:  string uma string que diferencia maiúsculas de minúsculas e representa o tipo de evento a ser detectado.
  • listener:  EventListener|EventListenerObject o objeto que recebe uma notificação. Precisa ser uma função ou um objeto com o método handleEvent.
  • options:  boolean|AddEventListenerOptions optional consulte as opções. Os eventos personalizados só aceitam capture e passive.
Valor de retorno:  void
Configura uma função que será chamada sempre que o evento especificado for entregue ao destino. Consulte addEventListener.
flyCameraAround
flyCameraAround(options)
Parâmetros: 
Valor de retorno: nenhum
Esse método faz a câmera orbitar em torno de um determinado local por um período específico. A animação pode ser repetida o número de vezes especificado em FlyAroundAnimationOptions.repeatCount.

A câmera vai se mover no sentido horário.

O método é assíncrono porque as animações só podem começar depois que o mapa tiver carregado uma quantidade mínima. O método retorna quando a animação é iniciada.

Se o número de vezes de FlyAroundAnimationOptions.repeatCount for zero, não haverá giro, e a animação será concluída imediatamente após o início.
flyCameraTo
flyCameraTo(options)
Parâmetros: 
Valor de retorno: nenhum
Esse método move a câmera de forma parabólica do local atual para um local final específico durante um período definido.

O método é assíncrono porque as animações só podem começar depois que o mapa tiver carregado uma quantidade mínima. O método retorna quando a animação é iniciada.
removeEventListener
removeEventListener(type, listener[, options])
Parâmetros: 
  • type:  string Uma string que especifica o tipo de evento para o qual um listener de eventos será removido.
  • listener:  EventListener|EventListenerObject o listener de eventos do manipulador de eventos a ser removido do destino do evento.
  • options:  boolean|EventListenerOptions optional consulte as opções.
Valor de retorno:  void
Remove do destino um listener de eventos registrado anteriormente com addEventListener. Consulte removeEventListener.
stopCameraAnimation
stopCameraAnimation()
Parâmetros: nenhum
Valor de retorno: nenhum
Esse método interrompe qualquer animação de voo que esteja em execução. A câmera permanece onde está no meio da animação, sem se mover para o ponto final.

O método é assíncrono porque as animações só podem começar ou parar depois que o mapa tiver carregado uma quantidade mínima. O método retorna quando a animação é interrompida.
gmp-animationend
function(animationEndEvent)
Argumentos: 
  • animationEndEvent:  Event
Esse evento é disparado quando a animação de voo termina. Esse evento se propaga pela árvore do DOM.
gmp-centerchange
function(centerChangeEvent)
Argumentos: 
  • centerChangeEvent:  Event
Esse evento é disparado quando a propriedade central do Map3DElement muda.
gmp-click
function(clickEvent)
Argumentos: 
Esse evento é acionado quando o elemento Map3DElement é clicado.
gmp-error
function(mapInitializationErrorEvent)
Argumentos: 
  • mapInitializationErrorEvent:  Event
Esse evento é acionado quando o mapa não é inicializado.
gmp-headingchange
function(headingChangeEvent)
Argumentos: 
  • headingChangeEvent:  Event
Esse evento é acionado quando a propriedade de direção do Map3DElement muda.
gmp-map-id-error
function(mapIdErrorEvent)
Argumentos: 
  • mapIdErrorEvent:  Event
Esse evento é acionado quando a propriedade mapId do Map3DElement é inválida.
gmp-rangechange
function(rangeChangeEvent)
Argumentos: 
  • rangeChangeEvent:  Event
Esse evento é disparado quando a propriedade de intervalo do Map3DElement muda.
gmp-rollchange
function(rollChangeEvent)
Argumentos: 
  • rollChangeEvent:  Event
Esse evento é acionado quando a propriedade de rotação do Map3DElement muda.
gmp-steadychange
function(steadyChangeEvent)
Argumentos: 
Esse evento é acionado quando o estado estável de Map3DElement muda.
gmp-tiltchange
function(tiltChangeEvent)
Argumentos: 
  • tiltChangeEvent:  Event
Esse evento é acionado quando a propriedade de inclinação do Map3DElement muda.

Interface Map3DElementOptions

Interface google.maps.maps3d.Map3DElementOptions

Objeto Map3DElementOptions usado para definir as propriedades que podem ser definidas em um Map3DElement.

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

Constantes MapMode

Constantes google.maps.maps3d.MapMode

Especifica um modo em que o mapa deve ser renderizado.

Acesse ligando para const {MapMode} = await google.maps.importLibrary("maps3d").
Consulte Bibliotecas na API Maps JavaScript.

HYBRID Esse modo mostra uma camada transparente das principais ruas em imagens de satélite ou fotorrealistas.
SATELLITE Esse modo mostra imagens de satélite ou fotorrealistas, quando disponíveis.

Constantes de GestureHandling

Constantes google.maps.maps3d.GestureHandling

Especifica como os eventos de gesto devem ser processados no elemento do mapa.

Acesse ligando para const {GestureHandling} = await google.maps.importLibrary("maps3d").
Consulte Bibliotecas na API Maps JavaScript.

AUTO Isso permite que o mapa escolha se vai usar o processamento de gestos cooperativo ou ganancioso. Esse é o comportamento padrão se não for especificado.

Isso faz com que o mapa entre no modo cooperativo se estiver dominando o pai de rolagem (geralmente a página host) de modo que o usuário não consiga rolar para fora do mapa para acessar outro conteúdo.
COOPERATIVE Isso força o modo cooperativo, em que teclas modificadoras ou gestos com dois dedos são necessários para rolar o mapa.
GREEDY Isso força o modo greedy, em que a página host não pode ser rolada por eventos do usuário no elemento do mapa.

Interface FlyAroundAnimationOptions

Interface google.maps.maps3d.FlyAroundAnimationOptions

Opções de personalização para a animação FlyCameraAround.

camera
O ponto central para onde a câmera deve olhar durante a animação de órbita. A direção do mapa vai mudar conforme a câmera orbita em torno desse ponto central.
durationMillis optional
Tipo:  number optional
A duração de um ciclo de animação em milissegundos.
repeatCount optional
Tipo:  number optional
Especifica o número de vezes que uma animação será repetida. Se o número for zero, a animação será concluída imediatamente após o início.
rounds optional
Tipo:  number optional
O número de voltas ao redor do centro na duração especificada. Isso controla a velocidade geral da rotação. Se você transmitir um número negativo para as voltas, a câmera vai girar no sentido anti-horário, em vez do sentido horário padrão.

Interface FlyToAnimationOptions

Interface google.maps.maps3d.FlyToAnimationOptions

Opções de personalização para a animação FlyCameraTo.

endCamera
O local para onde a câmera deve apontar no final da animação.
durationMillis optional
Tipo:  number optional
A duração da animação em milissegundos. Uma duração de 0 vai teletransportar a câmera diretamente para a posição final.

Interface CameraOptions

Interface google.maps.maps3d.CameraOptions

Objeto CameraOptions usado para definir as propriedades que podem ser definidas em um objeto de câmera. O objeto de câmera pode ser qualquer coisa que tenha uma posição de câmera, por exemplo, um estado de mapa atual ou um estado de animação solicitado para o futuro.

center optional
heading optional
Tipo:  number optional
range optional
Tipo:  number optional
roll optional
Tipo:  number optional
tilt optional
Tipo:  number optional

Classe SteadyChangeEvent

Classe google.maps.maps3d.SteadyChangeEvent

Esse evento é criado com base no monitoramento de um estado estável de Map3DElement. Esse evento se propaga pela árvore do DOM.

Essa classe estende Event.

Acesse ligando para const {SteadyChangeEvent} = await google.maps.importLibrary("maps3d").
Consulte Bibliotecas na API Maps JavaScript.

isSteady
Tipo:  boolean
Indica se o Map3DElement está estável (ou seja, se toda a renderização da cena atual foi concluída) ou não.

Classe LocationClickEvent

Classe google.maps.maps3d.LocationClickEvent

Esse evento é criado ao clicar em um Map3DElement.

Essa classe estende Event.

Acesse ligando para const {LocationClickEvent} = await google.maps.importLibrary("maps3d").
Consulte Bibliotecas na API Maps JavaScript.

position
Tipo:  LatLngAltitude optional
A latitude/longitude/altitude que estava abaixo do cursor quando o evento ocorreu. Em níveis mais amplos, os dados retornados serão menos precisos. Além disso, a elevação do fundo do mar pode ser retornada para o valor de altitude ao clicar na superfície da água de posições de câmera mais altas. Esse evento se propaga pela árvore do DOM.

Classe PlaceClickEvent

Classe google.maps.maps3d.PlaceClickEvent

Esse evento é criado ao clicar em um ícone de lugar em um Map3DElement. Para evitar que o popover padrão apareça, chame o método preventDefault() nesse evento para impedir que ele seja processado pelo Map3DElement.

Essa classe estende LocationClickEvent.

Acesse ligando para const {PlaceClickEvent} = await google.maps.importLibrary("maps3d").
Consulte Bibliotecas na API Maps JavaScript.

placeId
Tipo:  string
O ID de lugar do recurso do mapa.
Herdado: position
fetchPlace
fetchPlace()
Parâmetros: nenhum
Valor de retorno:  Promise<Place>
Busca um Place para esse ID de lugar. No objeto Place resultante, a propriedade id será preenchida. Outros campos podem ser solicitados posteriormente usando Place.fetchFields(), sujeito à ativação e ao faturamento normais da API Places. A promessa será rejeitada se houver um erro ao buscar o Place.