3D Maps

Classe Map3DElement

Classe google.maps.maps3d.Map3DElement

Map3DElement é uma interface HTML para a visualização de mapa 3D.

Elemento personalizado:
<gmp-map-3d center="lat,lng,altitude" default-labels-disabled default-ui-disabled heading="number" max-altitude="number" max-heading="number" max-tilt="number" min-altitude="number" min-heading="number" min-tilt="number" range="number" roll="number" tilt="number"></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 definido, restringe a posição da câmera dentro dos limites de latitude/longitude especificados. 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 um 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 do 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>
defaultLabelsDisabled
Tipo:boolean optional
Padrão:false
Quando true, os rótulos padrão do mapa não são renderizados.
Atributo HTML:
  • <gmp-map-3d default-labels-disabled></gmp-map-3d>
defaultUIDisabled
Tipo:boolean optional
Padrão:false
Quando true, todos os botões padrão da interface são desativados. Não desativa o teclado e os controles por gestos.
Atributo HTML:
  • <gmp-map-3d default-ui-disabled></gmp-map-3d>
heading
Tipo:number optional
A orientação da bússola do mapa, em graus, em que o norte verdadeiro é zero. Quando não há inclinação, qualquer rotação é interpretada como direção.
Atributo HTML:
  • <gmp-map-3d heading="number"></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 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 de rotação serão permitidos. minHeading = 180 e maxHeading = 90 vão permitir o cabeçalho em [0, 90] e o cabeçalho em [180, 360]. minHeading = 90 e maxHeading = 180 vão permitir o cabeçalho 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á mostrada 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 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 de rotação serão permitidos. minHeading = 180 e maxHeading = 90 vão permitir o cabeçalho em [0, 90] e o cabeçalho em [180, 360]. minHeading = 90 e maxHeading = 180 vão permitir o cabeçalho 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>
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>
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 olhando diretamente para baixo na Terra teria 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>
BetaaddEventListener
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 opções. Os eventos personalizados só são compatíveis com 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 um local específico por um determinado período, fazendo o número especificado de voltas nesse tempo.

Por padrão, a câmera orbita no sentido horário. Se for fornecido um número negativo para as rotações, a câmera vai orbitar no sentido anti-horário.

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

Se o número de rodadas 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 da localização atual para uma localização final específica durante um determinado período.

O método é assíncrono porque as animações só podem começar depois que o mapa é carregado em uma quantidade mínima. O método retorna quando a animação é iniciada.
BetaremoveEventListener
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 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á durante a animação, sem ser teleportada para o ponto final.

O método é assíncrono porque as animações só podem começar ou parar depois que o mapa carrega 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 é propagado 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-headingchange
function(headingChangeEvent)
Argumentos: 
  • headingChangeEvent:  Event
Esse evento é disparado quando a propriedade de cabeçalho do Map3DElement muda.
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 é disparado quando a propriedade "roll" do Map3DElement muda.
gmp-steadychange
function(steadyChangeEvent)
Argumentos: 
Esse evento é disparado quando o estado estável de Map3DElement muda.
gmp-tiltchange
function(tiltChangeEvent)
Argumentos: 
  • tiltChangeEvent:  Event
Esse evento é disparado 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
Consulte Map3DElement.bounds.
center optional
Consulte Map3DElement.center.
defaultLabelsDisabled optional
Tipo:boolean optional
Consulte Map3DElement.defaultLabelsDisabled.
defaultUIDisabled optional
Tipo:boolean optional
Consulte Map3DElement.defaultUIDisabled.
heading optional
Tipo:number optional
Consulte Map3DElement.heading.
maxAltitude optional
Tipo:number optional
Consulte Map3DElement.maxAltitude.
maxHeading optional
Tipo:number optional
Consulte Map3DElement.maxHeading.
maxTilt optional
Tipo:number optional
Consulte Map3DElement.maxTilt.
minAltitude optional
Tipo:number optional
Consulte Map3DElement.minAltitude.
minHeading optional
Tipo:number optional
Consulte Map3DElement.minHeading.
minTilt optional
Tipo:number optional
Consulte Map3DElement.minTilt.
range optional
Tipo:number optional
Consulte Map3DElement.range.
roll optional
Tipo:number optional
Consulte Map3DElement.roll.
tilt optional
Tipo:number optional
Consulte Map3DElement.tilt.

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 apontar durante a animação de órbita. A orientação do mapa muda conforme a câmera orbita em torno desse ponto central.
durationMillis optional
Tipo:number optional
A duração da animação em milissegundos. Essa é a duração total da animação, não de uma única rotação.
rounds optional
Tipo:number optional
O número de rotações em torno do centro na duração especificada. Isso controla a velocidade geral de rotação. Passar um número negativo para "rounds" faz com que a câmera gire 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 direto 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 no futuro.
center optional
Consulte Map3DElement.center.
heading optional
Tipo:number optional
Consulte Map3DElement.heading.
range optional
Tipo:number optional
Consulte Map3DElement.range.
roll optional
Tipo:number optional
Consulte Map3DElement.roll.
tilt optional
Tipo:number optional
Consulte Map3DElement.tilt.

Classe SteadyChangeEvent

Classe google.maps.maps3d.SteadyChangeEvent

Esse evento é criado ao monitorar um estado estável de Map3DElement. Esse evento é propagado 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, 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 grosseiros, 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 mais altas da câmera. Esse evento é propagado pela árvore do DOM.

Classe PlaceClickEvent

Classe google.maps.maps3d.PlaceClickEvent

Esse evento é criado ao clicar em um 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 do lugar do recurso do mapa.
Herdado: position
fetchPlace
fetchPlace()
Parâmetros:nenhum
Valor de retorno:Promise<Place>
Busca um Place para este ID de lugar. No objeto Place resultante, a propriedade "id" será preenchida. Outros campos podem ser solicitados posteriormente via Place.fetchFields(), sujeitos à ativação e ao faturamento normais da API Places. A promessa será rejeitada se houver um erro ao buscar o Place.

Classe Marker3DElement

Classe google.maps.maps3d.Marker3DElement

Mostra uma posição em um mapa 3D. O position precisa ser definido para que o Marker3DElement apareça.

Elemento personalizado:
<gmp-marker-3d altitude-mode="absolute" collision-behavior="required" draws-when-occluded extruded label="string" size-preserved z-index="number"></gmp-marker-3d>

Essa classe estende HTMLElement.

Essa classe implementa Marker3DElementOptions.

Acesse ligando para const {Marker3DElement} = await google.maps.importLibrary("maps3d").
Consulte Bibliotecas na API Maps JavaScript.
Marker3DElement
Marker3DElement([options])
Parâmetros:
Cria um Marker3DElement com as opções especificadas.
altitudeMode
Tipo:AltitudeMode optional
Padrão:AltitudeMode.CLAMP_TO_GROUND
Especifica como o componente de altitude da posição é interpretado.
Atributo HTML:
  • <gmp-marker-3d altitude-mode="absolute"></gmp-marker-3d>
  • <gmp-marker-3d altitude-mode="clamp-to-ground"></gmp-marker-3d>
  • <gmp-marker-3d altitude-mode="relative-to-ground"></gmp-marker-3d>
  • <gmp-marker-3d altitude-mode="relative-to-mesh"></gmp-marker-3d>
collisionBehavior
Tipo:CollisionBehavior optional
Padrão:CollisionBehavior.REQUIRED
Uma enumeração que especifica como um Marker3DElement deve se comportar quando entra em conflito com outro Marker3DElement ou com os rótulos do mapa de base.
Atributo HTML:
  • <gmp-marker-3d collision-behavior="required"></gmp-marker-3d>
  • <gmp-marker-3d collision-behavior="required-and-hides-optional"></gmp-marker-3d>
  • <gmp-marker-3d collision-behavior="optional-and-hides-lower-priority"></gmp-marker-3d>
drawsWhenOccluded
Tipo:boolean optional
Padrão:false
Especifica se o marcador deve ser desenhado ou não quando estiver ocluído. O marcador pode ser ocultado pela geometria do mapa (por exemplo, edifícios).
Atributo HTML:
  • <gmp-marker-3d draws-when-occluded></gmp-marker-3d>
extruded
Tipo:boolean optional
Padrão:false
Especifica se o marcador deve ser conectado ao chão. Para extrudar um marcador, o altitudeMode precisa ser RELATIVE_TO_GROUND ou ABSOLUTE.
Atributo HTML:
  • <gmp-marker-3d extruded></gmp-marker-3d>
label
Tipo:string optional
Texto a ser exibido por este marcador.
Atributo HTML:
  • <gmp-marker-3d label="string"></gmp-marker-3d>
position
O local da ponta do marcador. A altitude é ignorada em alguns modos e, portanto, é opcional.
sizePreserved
Tipo:boolean optional
Padrão:false
Especifica se o marcador deve preservar o tamanho, independente da distância da câmera. Por padrão, o marcador é dimensionado com base na distância da câmera/inclinação.
Atributo HTML:
  • <gmp-marker-3d size-preserved></gmp-marker-3d>
zIndex
Tipo:number optional
O zIndex comparado a outros marcadores.
Atributo HTML:
  • <gmp-marker-3d z-index="number"></gmp-marker-3d>
default
Todos os elementos personalizados adicionados diretamente ao Marker3DElement serão inseridos, mas apenas os elementos dos tipos HTMLImageElement, SVGElement e PinElement serão usados para desenhar marcadores. Os outros elementos serão ignorados.
HTMLImageElement e SVGElement precisam ser encapsulados no elemento <template> antes de serem atribuídos ao slot padrão do Marker3DElement.

No momento, as imagens e os SVGs são rasterizados antes de serem renderizados na cena 3D. Portanto, o HTML personalizado incorporado ao SVG ou as classes CSS adicionadas às imagens não serão aplicados e poderão não ser refletidos quando os marcadores forem exibidos na tela.
BetaaddEventListener
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 opções. Os eventos personalizados só são compatíveis com 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.
BetaremoveEventListener
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 opções.
Valor de retorno:void
Remove do destino um listener de eventos registrado anteriormente com addEventListener. Consulte removeEventListener.

Interface Marker3DElementOptions

Interface google.maps.maps3d.Marker3DElementOptions