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");
Construtor | |
|---|---|
Map3DElement |
Map3DElement([options])Parâmetros:
|
Propriedades | |
|---|---|
attr: autofits-camera-animation |
Padrão:
noneA animação a ser usada para o ajuste automático da câmera.
Atributo HTML: autofits-camera-animation="value-name" |
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. |
cameraPosition
attr: camera-position |
Tipo de entrada:
LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optionalTipo de saída: LatLngAltitude optionalA 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 optionalTipo de saída: LatLngAltitude optionalO 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" |
attr: color-scheme |
Padrão:
ColorScheme.FOLLOW_SYSTEMEspecifica 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 optionalTipo de saída: booleanPadrão:
falseQuando
true, todos os botões de interface padrão ficam ocultos.Atributo HTML: default-ui-hidden |
description
attr: description |
Tipo de entrada:
string optionalTipo de saída: string optionalSe 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 optionalTipo de saída: number optionalEspecifica 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 |
Padrão:
GestureHandling.GREEDYControla 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 optionalTipo de saída: number optionalA 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 |
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 optionalTipo de saída: string optionalIdioma 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 optionalTipo de saída: string optionalEspecifica 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 optionalTipo de saída: number optionalA 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 optionalTipo de saída: number optionalO â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" |
attr: max-memory-megabytes |
Tipo de entrada:
number optionalTipo de saída: number optionalA 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 optionalTipo de saída: number optionalO â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 optionalTipo de saída: number optionalA 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 optionalTipo de saída: number optionalO â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 optionalTipo de saída: number optionalO â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 |
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" |
attr: quality-mode |
Padrão:
QualityMode.FIDELITYEspecifica 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 optionalTipo de saída: number optionalA distância da câmera até o centro do mapa, em metros.
Atributo HTML: range="number" |
region |
Tipo de entrada:
string optionalTipo de saída: string optionalRegiã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 optionalTipo de saída: number optionalA 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 optionalTipo de saída: number optionalA 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" |
attr: default-ui-disabled |
Tipo:
boolean optionalPadrão:
falseQuando
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 |
Métodos | |
|---|---|
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
| |
Eventos | |
|---|---|
gmp-animationend |
function(animationEndEvent)Argumentos:
Esse evento é disparado quando a animação de voo termina. Esse evento se propaga pela árvore do DOM. |
gmp-camerapositionchange |
function(cameraPositionChangeEvent)Argumentos:
Esse evento é disparado quando a propriedade cameraPosition do Map3DElement muda. |
gmp-centerchange |
function(centerChangeEvent)Argumentos:
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:
Esse evento é acionado quando o mapa não é inicializado. |
gmp-fovchange |
function(fovChangeEvent)Argumentos:
Esse evento é acionado quando a propriedade fov do Map3DElement muda. |
gmp-headingchange |
function(headingChangeEvent)Argumentos:
Esse evento é acionado quando a propriedade de direção do Map3DElement muda. |
gmp-map-id-error |
function(mapIdErrorEvent)Argumentos:
Esse evento é acionado quando a propriedade mapId do Map3DElement é inválida. |
gmp-rangechange |
function(rangeChangeEvent)Argumentos:
Esse evento é disparado quando a propriedade de intervalo do Map3DElement muda. |
gmp-rollchange |
function(rollChangeEvent)Argumentos:
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:
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.
Propriedades | |
|---|---|
opcional |
Tipo:
AutofitsCameraAnimation optionalConsulte . |
bounds
opcional |
Tipo:
LatLngBounds|LatLngBoundsLiteral optionalConsulte Map3DElement.bounds. |
cameraPosition
opcional |
Tipo:
LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optionalConsulte Map3DElement.cameraPosition. |
center
opcional |
Tipo:
LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optionalConsulte Map3DElement.center. |
opcional |
Tipo:
ColorScheme optionalConsulte . |
opcional |
Tipo:
boolean optionalConsulte . |
defaultUIHidden
opcional |
Tipo:
boolean optionalConsulte Map3DElement.defaultUIHidden. |
description
opcional |
Tipo:
string optionalConsulte Map3DElement.description. |
fov
opcional |
Tipo:
number optionalConsulte Map3DElement.fov. |
gestureHandling
opcional |
Tipo:
GestureHandling optionalConsulte Map3DElement.gestureHandling. |
heading
opcional |
Tipo:
number optionalConsulte Map3DElement.heading. |
internalUsageAttributionIds
opcional |
Tipo:
Iterable<string> optionalConsulte Map3DElement.internalUsageAttributionIds. |
language
opcional |
Tipo:
string optionalConsulte Map3DElement.language. |
mapId
opcional |
Tipo:
string optionalConsulte Map3DElement.mapId. |
maxAltitude
opcional |
Tipo:
number optionalConsulte Map3DElement.maxAltitude. |
maxHeading
opcional |
Tipo:
number optionalConsulte Map3DElement.maxHeading. |
opcional |
Tipo:
number optionalConsulte . |
maxTilt
opcional |
Tipo:
number optionalConsulte Map3DElement.maxTilt. |
minAltitude
opcional |
Tipo:
number optionalConsulte Map3DElement.minAltitude. |
minHeading
opcional |
Tipo:
number optionalConsulte Map3DElement.minHeading. |
minTilt
opcional |
Tipo:
number optionalConsulte Map3DElement.minTilt. |
mode
opcional |
Tipo:
MapMode optionalConsulte Map3DElement.mode. |
opcional |
Tipo:
QualityMode optionalConsulte . |
range
opcional |
Tipo:
number optionalConsulte Map3DElement.range. |
region
opcional |
Tipo:
string optionalConsulte Map3DElement.region. |
roll
opcional |
Tipo:
number optionalConsulte Map3DElement.roll. |
tilt
opcional |
Tipo:
number optionalConsulte Map3DElement.tilt. |
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");
Constantes | |
|---|---|
HYBRID |
Esse modo mostra uma camada transparente das principais ruas em imagens de satélite ou fotorrealistas. |
|
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");
Constantes | |
|---|---|
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");
Constantes | |
|---|---|
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");
Constantes | |
|---|---|
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.
Propriedades | |
|---|---|
camera |
Tipo:
CameraOptionsO 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 optionalA duração de um ciclo de animação em milissegundos. |
repeatCount
opcional |
Tipo:
number optionalEspecifica 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. |
opcional |
Tipo:
number optionalO 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.
Propriedades | |
|---|---|
endCamera |
Tipo:
CameraOptionsO local para onde a câmera deve apontar no final da animação. |
durationMillis
opcional |
Tipo:
number optionalA 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.
Propriedades | |
|---|---|
altitudeMode
opcional |
Tipo:
AltitudeMode optionalPadrão:
AltitudeMode.ABSOLUTEUm tipo enumerado que especifica como interpretar o valor de altitude do objeto CameraOptions fornecido. Isso reutiliza o tipo enumerado AltitudeMode atual. |
cameraPosition
opcional |
Tipo:
LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optionalConsulte Map3DElement.cameraPosition. |
center
opcional |
Tipo:
LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optionalConsulte Map3DElement.center. |
fov
opcional |
Tipo:
number optionalConsulte Map3DElement.fov. |
heading
opcional |
Tipo:
number optionalConsulte Map3DElement.heading. |
range
opcional |
Tipo:
number optionalConsulte Map3DElement.range. |
roll
opcional |
Tipo:
number optionalConsulte Map3DElement.roll. |
tilt
opcional |
Tipo:
number optionalConsulte Map3DElement.tilt. |
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");
Propriedades | |
|---|---|
isSteady |
Tipo:
booleanIndica 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");
Propriedades | |
|---|---|
position |
Tipo:
LatLngAltitude optionalA 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");
Propriedades | |
|---|---|
position |
Tipo:
LatLngAltitude optionalA 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");
Propriedades | |
|---|---|
placeId |
Tipo:
stringO ID de lugar do recurso do mapa. |
Herdado:
position
| |
Métodos | |
|---|---|
fetchPlace |
fetchPlace()Parâmetros: nenhum
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. |