3D Maps

Classe Map3DElement

classe google.maps.maps3d.Map3DElement estende HTMLElement implementa Map3DElementOptions
biblioteca "maps3d"

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.

<gmp-map-3d
  autofits-camera-animation="value-name"
  camera-position="lat,lng,altitude"
  center="lat,lng,altitude"
  color-scheme="value-name"
  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-memory-megabytes="number"
  max-tilt="number"
  min-altitude="number"
  min-heading="number"
  min-tilt="number"
  mode="value-name"
  quality-mode="value-name"
  range="number"
  roll="number"
  tilt="number">
</gmp-map-3d>
const {Map3DElement} = await google.maps.importLibrary("maps3d");
Map3DElement
Map3DElement([options])
Parâmetros:
AlphaautofitsCameraAnimation
attr: autofits-camera-animation
Tipo de entrada: AutofitsCameraAnimation optional
Tipo de saída: AutofitsCameraAnimation optional
Padrão: none
A animação a ser usada para o ajuste automático da câmera.
Atributo HTML: autofits-camera-animation="value-name"
bounds
Tipo de entrada: LatLngBounds|LatLngBoundsLiteral optional
Tipo de saída: LatLngBounds optional
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.
cameraPosition
attr: camera-position
Tipo de entrada: LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional
Tipo de saída: LatLngAltitude optional
A posição da câmera fornecida como um LatLngAltitude. Será derivado se for omitido. Se center for omitido, mas cameraPosition for especificado, center será derivado de cameraPosition.. Se ambos forem atualizados no mesmo loop de execução, cameraPosition será priorizado. Os campos cameraPosition e center podem ser derivados um do outro no contexto da direção, do alcance, da rotação e da inclinação compartilhados.
Atributo HTML: camera-position="lat,lng,altitude"
center
attr: center
Tipo de entrada: LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional
Tipo de saída: LatLngAltitude optional
O centro do mapa fornecido como um LatLngAltitude, em que a altitude é em metros acima do nível médio do mar. 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: 63710000}. 63.710.000 metros é a altitude máxima permitida (raio da Terra multiplicado por 10).
Atributo HTML: center="lat,lng,altitude"
BetacolorScheme
attr: color-scheme
Tipo de entrada: ColorScheme optional
Tipo de saída: ColorScheme optional
Especifica o esquema de cores do mapa. Se não for definido, o padrão será ColorScheme.FOLLOW_SYSTEM.
Atributo HTML: color-scheme="value-name"
defaultUIHidden
attr: default-ui-hidden
Tipo de entrada: boolean optional
Tipo de saída: boolean
Padrão: false
Quando true, todos os botões de interface padrão ficam ocultos.
Atributo HTML: default-ui-hidden
description
attr: description
Tipo de entrada: string optional
Tipo de saída: 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: description="string"
fov
attr: fov
Tipo de entrada: number optional
Tipo de saída: number optional
Especifica o campo de visão vertical em graus. Os valores válidos variam de 5,0 a 80,0. Valores mais altos aumentam a área visível, mas podem introduzir distorção de perspectiva. Padrão: 35.0.
Atributo HTML: fov="number"
gestureHandling
attr: gesture-handling
Tipo de entrada: GestureHandling optional
Tipo de saída: GestureHandling
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: gesture-handling="value-name"
heading
attr: heading
Tipo de entrada: number optional
Tipo de saída: 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: heading="number"
internalUsageAttributionIds
attr: internal-usage-attribution-ids
Tipo de entrada: Iterable<string> optional
Tipo de saída: Array<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: internal-usage-attribution-ids="id1 id2"
language
Tipo de entrada: string optional
Tipo de saída: 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
attr: map-id
Tipo de entrada: string optional
Tipo de saída: string optional
Especifica um ID do mapa que será usado para buscar a estilização de mapas baseada na nuvem.
Atributo HTML: map-id="string"
maxAltitude
attr: max-altitude
Tipo de entrada: number optional
Tipo de saída: number optional
A altitude máxima acima do solo que será mostrada no mapa. Um valor válido está entre 0 e 63710000 metros (raio da Terra multiplicado por 10).
Atributo HTML: max-altitude="number"
maxHeading
attr: max-heading
Tipo de entrada: number optional
Tipo de saída: 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: max-heading="number"
BetamaxMemoryMegabytes
attr: max-memory-megabytes
Tipo de entrada: number optional
Tipo de saída: number optional
A quantidade máxima de memória, em megabytes, que o mapa pode usar para renderização. Valores mais baixos reduzem o uso da memória, mas diminuem os detalhes visuais. Valores mais altos permitem que mais detalhes sejam mantidos na memória. Os valores válidos variam de 64 a 2048. Se não for definido, um limite será escolhido automaticamente com base no dispositivo e no tamanho do mapa. Precisa ser definido antes de o mapa ser inicializado. As mudanças feitas depois são ignoradas.
Atributo HTML: max-memory-megabytes="number"
maxTilt
attr: max-tilt
Tipo de entrada: number optional
Tipo de saída: number optional
O ângulo máximo de incidência do mapa. Um valor válido está entre 0 e 90 graus.
Atributo HTML: max-tilt="number"
minAltitude
attr: min-altitude
Tipo de entrada: number optional
Tipo de saída: number optional
A altitude mínima acima do solo que será exibida no mapa. Um valor válido está entre 0 e 63710000 metros (raio da Terra multiplicado por 10).
Atributo HTML: min-altitude="number"
minHeading
attr: min-heading
Tipo de entrada: number optional
Tipo de saída: 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: min-heading="number"
minTilt
attr: min-tilt
Tipo de entrada: number optional
Tipo de saída: number optional
O ângulo mínimo de incidência do mapa. Um valor válido está entre 0 e 90 graus.
Atributo HTML: min-tilt="number"
mode
attr: mode
Tipo de entrada: MapMode optional
Tipo de saída: 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: mode="value-name"
BetaqualityMode
attr: quality-mode
Tipo de entrada: QualityMode optional
Tipo de saída: QualityMode optional
Especifica a qualidade de renderização do mapa. Defina como QualityMode.PERFORMANCE para renderizar com detalhes visuais reduzidos, o que diminui o uso da memória.
Atributo HTML: quality-mode="value-name"
range
attr: range
Tipo de entrada: number optional
Tipo de saída: number optional
A distância da câmera até o centro do mapa, em metros.
Atributo HTML: range="number"
region
Tipo de entrada: string optional
Tipo de saída: 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
attr: roll
Tipo de entrada: number optional
Tipo de saída: 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: roll="number"
tilt
attr: tilt
Tipo de entrada: number optional
Tipo de saída: 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: tilt="number"
defaultUIDisabled
attr: default-ui-disabled
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: default-ui-disabled
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 local que está sendo orbitado é especificado por CameraOptions.center. Esse é o local que vai aparecer no centro da janela de visualização durante a animação de órbita, enquanto a câmera se move ao redor dele.

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 local final pode ser especificado por CameraOptions.cameraPosition, que controla a posição exata da câmera, ou por CameraOptions.center, que controla o centro da janela de visualização do mapa.

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.
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.
Herdado: addEventListener, removeEventListener
gmp-animationend
function(animationEndEvent)
Argumentos:
  • animationEndEvent: Event optional
Esse evento é disparado quando a animação de voo termina. Esse evento se propaga pela árvore do DOM.
gmp-camerapositionchange
function(cameraPositionChangeEvent)
Argumentos:
  • cameraPositionChangeEvent: Event optional
Esse evento é disparado quando a propriedade cameraPosition do Map3DElement muda.
gmp-centerchange
function(centerChangeEvent)
Argumentos:
  • centerChangeEvent: Event optional
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 optional
Esse evento é acionado quando o mapa não é inicializado.
gmp-fovchange
function(fovChangeEvent)
Argumentos:
  • fovChangeEvent: Event optional
Esse evento é acionado quando a propriedade fov do Map3DElement muda.
gmp-headingchange
function(headingChangeEvent)
Argumentos:
  • headingChangeEvent: Event optional
Esse evento é acionado quando a propriedade de direção do Map3DElement muda.
gmp-map-id-error
function(mapIdErrorEvent)
Argumentos:
  • mapIdErrorEvent: Event optional
Esse evento é acionado quando a propriedade mapId do Map3DElement é inválida.
gmp-rangechange
function(rangeChangeEvent)
Argumentos:
  • rangeChangeEvent: Event optional
Esse evento é disparado quando a propriedade de intervalo do Map3DElement muda.
gmp-rollchange
function(rollChangeEvent)
Argumentos:
  • rollChangeEvent: Event optional
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 optional
Esse evento é acionado quando a propriedade de inclinação do Map3DElement muda.

Interface Map3DElementOptions

interface google.maps.maps3d.Map3DElementOptions
implementada por Map3DElement

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

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

Constantes MapMode

constantes google.maps.maps3d.MapMode
biblioteca "maps3d"

Especifica um modo em que o mapa deve ser renderizado.

Essas constantes também podem ser usadas como strings. No TypeScript, os literais de string são definidos pelo tipo MapModeString.

const {MapMode} = await google.maps.importLibrary("maps3d");
HYBRID Esse modo mostra uma camada transparente das principais ruas em imagens de satélite ou fotorrealistas.
BetaROADMAP Esse modo mostra um mapa de ruas normal.
SATELLITE Esse modo mostra imagens de satélite ou fotorrealistas, quando disponíveis.

Constantes QualityMode

constantes google.maps.maps3d.QualityMode
biblioteca "maps3d"

Especifica a qualidade de renderização do mapa 3D.

Essas constantes também podem ser usadas como strings. No TypeScript, os literais de string são definidos pelo tipo QualityModeString.

const {QualityMode} = await google.maps.importLibrary("maps3d");
FIDELITY Renderiza o mapa com detalhes visuais padrão.
PERFORMANCE Renderiza o mapa com menos detalhes visuais para reduzir o uso da memória. Útil em dispositivos com restrição de memória ou quando o mapa compartilha a página com outro conteúdo que consome muita memória.

Constantes de GestureHandling

constantes google.maps.maps3d.GestureHandling
biblioteca "maps3d"

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

Essas constantes também podem ser usadas como strings. No TypeScript, os literais de string são definidos pelo tipo GestureHandlingString.

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

Constantes AutofitsCameraAnimation

constantes google.maps.maps3d.AutofitsCameraAnimation
biblioteca "maps3d"

Especifica como a câmera deve se comportar ao se mover para uma nova posição para se centralizar de acordo com os elementos filhos ativados.

Essas constantes também podem ser usadas como strings. No TypeScript, os literais de string são definidos pelo tipo AutofitsCameraAnimationString.

const {AutofitsCameraAnimation} = await google.maps.importLibrary("maps3d");
FLY_TO Voa para a nova posição.
NONE Ajusta-se à nova posição sem uma animação.

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
opcional
Tipo: number optional
A duração de um ciclo de animação em milissegundos.
repeatCount
opcional
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. Se Number.Infinity for transmitido, a animação será repetida indefinidamente.
rounds
opcional
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
opcional
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.

altitudeMode
opcional
Tipo: AltitudeMode optional
Um tipo enumerado que especifica como interpretar o valor de altitude do objeto CameraOptions fornecido. Isso reutiliza o tipo enumerado AltitudeMode atual.
cameraPosition
opcional
center
opcional
fov
opcional
Tipo: number optional
heading
opcional
Tipo: number optional
range
opcional
Tipo: number optional
roll
opcional
Tipo: number optional
tilt
opcional
Tipo: number optional

Classe SteadyChangeEvent

classe google.maps.maps3d.SteadyChangeEvent estende Event
biblioteca "maps3d"

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

const {SteadyChangeEvent} = await google.maps.importLibrary("maps3d");
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 estende Event
estendida por PlaceClickEvent
biblioteca "maps3d"

Esse evento é criado ao clicar em um Map3DElement.

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

classe google.maps.maps3d.LocationPointerEvent estende Event
biblioteca "maps3d"

Esse evento é criado quando ocorre uma interação de ponteiro em um Map3DElement interativo.

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

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.

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