3D Maps

Classe Map3DElement

Classe google.maps.maps3d.Map3DElement

O Map3DElement é uma interface HTML para a visualização em 3D do mapa.

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 chamando 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 lat/lng 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 é informado como LatLngAltitude, em que a altitude está em metros acima do nível do solo. Isso não é necessariamente onde a câmera está localizada, porque 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}. 6.317.0000 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 ficam desativados. Não desativa os controles de teclado e gestos.
Atributo HTML:
  • <gmp-map-3d default-ui-disabled></gmp-map-3d>
heading
Tipo:number optional
A direção da bússola do mapa, em graus, em que o norte verdadeiro é zero. Quando não há inclinação, qualquer rolagem é 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 vai 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 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 de direção são permitidos. minHeading = 180 e maxHeading = 90 permitem o título em [0, 90] e o título em [180, 360]. minHeading = 90 e maxHeading = 180 vão permitir o título 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 vai 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 de direção são permitidos. minHeading = 180 e maxHeading = 90 permitem o título em [0, 90] e o título em [180, 360]. minHeading = 90 e maxHeading = 180 vão permitir o título 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
É o ângulo de inclinação da câmera em graus em torno do vetor de visualização. Para resolver ambiguidades, quando não há inclinação, qualquer rolagem é interpretada como direção.
Atributo HTML:
  • <gmp-map-3d roll="number"></gmp-map-3d>
tilt
Tipo:number optional
A inclinação do vetor de visão da câmera em graus. Um vetor de visualização que olha diretamente para a Terra teria uma inclinação de 0 graus. 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 que 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ó 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 orbita a câmera em torno de um determinado local por um período específico, fazendo o número especificado de voltas nesse período.

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

O método é assíncrono porque as animações só podem ser iniciadas depois que o mapa carregar uma quantidade mínima. O método é retornado 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 parabólica do local atual para um determinado local final em um determinado período.

O método é assíncrono porque as animações só podem ser iniciadas depois que o mapa carregar uma quantidade mínima. O método é retornado quando a animação é iniciada.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Parâmetros:
Valor de retorno:void
Remove um listener de eventos registrado anteriormente com addEventListener do destino. Consulte removeEventListener.
stopCameraAnimation
stopCameraAnimation()
Parâmetros:nenhum
Valor de retorno:nenhum
Esse método interrompe qualquer animação de mosca que possa estar em execução. A câmera permanece onde está durante a animação. Ela não se teletransporta para o ponto final.

O método é assíncrono porque as animações só podem ser iniciadas ou interrompidas depois que o mapa carrega uma quantidade mínima. O método é retornado quando a animação é interrompida.
gmp-animationend
function(animationEndEvent)
Argumentos: 
  • animationEndEvent:  Event
Esse evento é acionado quando a animação de sobrevoo termina. Esse evento é transmitido pela árvore DOM.
gmp-centerchange
function(centerChangeEvent)
Argumentos: 
  • centerChangeEvent:  Event
Esse evento é disparado quando a propriedade de centro 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 é acionado quando a propriedade de direção do Map3DElement muda.
gmp-rangechange
function(rangeChangeEvent)
Argumentos: 
  • rangeChangeEvent:  Event
Esse evento é acionado quando a propriedade de alcance do Map3DElement muda.
gmp-rollchange
function(rollChangeEvent)
Argumentos: 
  • rollChangeEvent:  Event
Esse evento é acionado quando a propriedade de rolagem 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 é 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 precisa 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 da animação em milissegundos. Essa é a duração total da animação, não a duração de uma única rotação.
rounds optional
Tipo:number optional
O número de voltas para girar em torno do centro no período especificado. Isso controla a velocidade geral da rotação. Transmitir um número negativo para as rodadas 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 teletransporta 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 da câmera pode ser qualquer coisa que tenha uma posição da câmera, por exemplo, um estado atual do mapa 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 é transmitido pela árvore DOM.

Essa classe estende Event.

Acesse chamando 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 chamando 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 da altitude ao clicar na superfície da água de posições mais altas da câmera. Esse evento é transmitido pela árvore DOM.

Classe PlaceClickEvent

Classe google.maps.maps3d.PlaceClickEvent

Esse evento é criado ao clicar em um Map3DElement.

Essa classe estende LocationClickEvent.

Acesse chamando const {PlaceClickEvent} = await google.maps.importLibrary("maps3d"). Consulte Bibliotecas na API Maps JavaScript.
placeId
Tipo:string
O ID do lugar do elemento 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 usando Place.fetchFields(), sujeitos à ativação e ao faturamento normais da API Places. A promessa é 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 seja exibido.

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 chamando 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
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
Uma enumeração que especifica como um Marker3DElement deve se comportar quando entrar em conflito com outro Marker3DElement ou com os rótulos do mapa 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 esse marcador precisa ser desenhado ou não quando está obstruído. O marcador pode ser obstruído 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 vai ser conectado ao solo. Para extrair um marcador, 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 esse marcador.
Atributo HTML:
  • <gmp-marker-3d label="string"></gmp-marker-3d>
position
O local da ponta do marcador. A altitude é ignorada em determinados modos e, portanto, é opcional.
sizePreserved
Tipo:boolean optional
Padrão:false
Especifica se esse marcador precisa preservar o tamanho ou não, independentemente 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 em comparação com 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 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.

Atualmente, as imagens e os SVGs são rasterizados antes de serem renderizados na cena 3D. Portanto, o HTML personalizado incorporado a classes SVG ou CSS adicionadas às imagens não será aplicado e talvez não seja refletido 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 que 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ó 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:
Valor de retorno:void
Remove um listener de eventos registrado anteriormente com addEventListener do destino. Consulte removeEventListener.

Interface Marker3DElementOptions

Interface google.maps.maps3d.Marker3DElementOptions

Objeto Marker3DElementOptions usado para definir as propriedades que podem ser definidas em um Marker3DElement.
altitudeMode optional
Tipo:AltitudeMode optional
Consulte Marker3DElement.altitudeMode.
collisionBehavior optional
Tipo:CollisionBehavior optional
Consulte Marker3DElement.collisionBehavior.
drawsWhenOccluded optional
Tipo:boolean optional
Consulte Marker3DElement.drawsWhenOccluded.
extruded optional
Tipo:boolean optional
Consulte Marker3DElement.extruded.
label optional
Tipo:string optional
Consulte Marker3DElement.label.
position optional
Consulte Marker3DElement.position.
sizePreserved optional
Tipo:boolean optional
Consulte Marker3DElement.sizePreserved.
zIndex optional
Tipo:number optional
Consulte Marker3DElement.zIndex.

Classe Marker3DInteractiveElement

Classe google.maps.maps3d.Marker3DInteractiveElement

Mostra uma posição em um mapa 3D. O position precisa ser definido para que o Marker3DInteractiveElement seja exibido. Ao contrário de Marker3DElement, Marker3DInteractiveElement recebe um evento gmp-click.

Elemento personalizado:
<gmp-marker-3d-interactive></gmp-marker-3d-interactive>

Essa classe estende Marker3DElement.

Essa classe implementa Marker3DInteractiveElementOptions.

Acesse chamando const {Marker3DInteractiveElement} = await google.maps.importLibrary("maps3d"). Consulte Bibliotecas na API Maps JavaScript.
Marker3DInteractiveElement
Marker3DInteractiveElement([options])
Parâmetros:
Cria um Marker3DInteractiveElement com as opções especificadas.
Herdado: altitudeMode, collisionBehavior, drawsWhenOccluded, extruded, label, position, sizePreserved, zIndex
default
Todos os elementos personalizados adicionados diretamente ao Marker3DInteractiveElement serão inseridos, mas apenas elementos do tipo PinElement serão usados para desenhar marcadores. Os outros elementos serão ignorados.
addEventListener
addEventListener(type, listener[, options])
Parâmetros:
  • type:  string uma string que diferencia maiúsculas de minúsculas que 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ó 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.
removeEventListener
removeEventListener(type, listener[, options])
Parâmetros:
Valor de retorno:void
Remove um listener de eventos registrado anteriormente com addEventListener do destino. Consulte removeEventListener.
gmp-click
function(clickEvent)
Argumentos: 
Esse evento é acionado quando o elemento Marker3DInteractiveElement é clicado.

Interface Marker3DInteractiveElementOptions

Interface google.maps.maps3d.Marker3DInteractiveElementOptions

Objeto Marker3DInteractiveElementOptions usado para definir as propriedades que podem ser definidas em um Marker3DInteractiveElement.

Essa interface estende Marker3DElementOptions.

Herdado: altitudeMode, collisionBehavior, drawsWhenOccluded, extruded, label, position, sizePreserved, zIndex

Classe Model3DElement

Classe google.maps.maps3d.Model3DElement

Um modelo 3D que permite a renderização de modelos gLTF. position e src precisam ser definidos para que o Model3DElement seja exibido.

As propriedades principais do gLTF PBR precisam ser compatíveis. No momento, não há suporte para extensões ou propriedades de extensão.

Elemento personalizado:
<gmp-model-3d altitude-mode="absolute" src="src"></gmp-model-3d>

Essa classe estende HTMLElement.

Essa classe implementa Model3DElementOptions.

Acesse chamando const {Model3DElement} = await google.maps.importLibrary("maps3d"). Consulte Bibliotecas na API Maps JavaScript.
Model3DElement
Model3DElement([options])
Parâmetros:
Cria um Model3DElement com as opções especificadas.
altitudeMode
Tipo:AltitudeMode optional
Especifica como a altitude na posição é interpretada.
Atributo HTML:
  • <gmp-model-3d altitude-mode="absolute"></gmp-model-3d>
  • <gmp-model-3d altitude-mode="clamp-to-ground"></gmp-model-3d>
  • <gmp-model-3d altitude-mode="relative-to-ground"></gmp-model-3d>
  • <gmp-model-3d altitude-mode="relative-to-mesh"></gmp-model-3d>
orientation
Descreve a rotação do sistema de coordenadas de um modelo 3D para posicionar o modelo no mapa 3D.

As rotações são aplicadas ao modelo na seguinte ordem: rolagem, inclinação e direção.
position
Define a posição do Model3DElement. A altitude é ignorada em determinados modos e, portanto, é opcional.
scale
Tipo:number|Vector3D|Vector3DLiteral optional
Padrão:1
Dimensiona o modelo ao longo dos eixos x, y e z no espaço de coordenadas do modelo.
src
Tipo:string|URL optional
Especifica o URL do modelo 3D. No momento, só há suporte para modelos no formato .glb.

Todos os URLs HTTP relativos serão resolvidos para os URLs absolutos correspondentes.

Se você estiver hospedando os arquivos de modelo .glb em um site ou servidor diferente do aplicativo principal, configure os cabeçalhos HTTP CORS corretos. Isso permite que o aplicativo acesse com segurança os arquivos de modelo do outro domínio.
Atributo HTML:
  • <gmp-model-3d src="src"></gmp-model-3d>
BetaaddEventListener
addEventListener(type, listener[, options])
Parâmetros:
  • type:  string uma string que diferencia maiúsculas de minúsculas que 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ó 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:
Valor de retorno:void
Remove um listener de eventos registrado anteriormente com addEventListener do destino. Consulte removeEventListener.

Interface Model3DElementOptions

Interface google.maps.maps3d.Model3DElementOptions

Objeto Model3DElementOptions usado para definir as propriedades que podem ser definidas em um Model3DElement.
altitudeMode optional
Tipo:AltitudeMode optional
Consulte Model3DElement.altitudeMode.
orientation optional
Consulte Model3DElement.orientation.
position optional
Consulte Model3DElement.position.
scale optional
Tipo:number|Vector3D|Vector3DLiteral optional
Consulte Model3DElement.scale.
src optional
Tipo:string|URL optional
Consulte Model3DElement.src.

Classe Polyline3DElement

Classe google.maps.maps3d.Polyline3DElement

Uma polilinha 3D é uma sobreposição linear de segmentos de linha conectados em um mapa 3D.

Elemento personalizado:
<gmp-polyline-3d altitude-mode="absolute" draws-occluded-segments extruded geodesic outer-color="string" outer-width="number" stroke-color="string" stroke-width="number" z-index="number"></gmp-polyline-3d>

Essa classe estende HTMLElement.

Essa classe implementa Polyline3DElementOptions.

Acesse chamando const {Polyline3DElement} = await google.maps.importLibrary("maps3d"). Consulte Bibliotecas na API Maps JavaScript.
Polyline3DElement
Polyline3DElement([options])
Parâmetros:
Cria um Polyline3DElement com as opções especificadas.
altitudeMode
Tipo:AltitudeMode optional
Especifica como os componentes de altitude nas coordenadas são interpretados.
Atributo HTML:
  • <gmp-polyline-3d altitude-mode="absolute"></gmp-polyline-3d>
  • <gmp-polyline-3d altitude-mode="clamp-to-ground"></gmp-polyline-3d>
  • <gmp-polyline-3d altitude-mode="relative-to-ground"></gmp-polyline-3d>
  • <gmp-polyline-3d altitude-mode="relative-to-mesh"></gmp-polyline-3d>
coordinates
A sequência ordenada de coordenadas da polilinha. A altitude é ignorada em determinados modos e, portanto, é opcional.
drawsOccludedSegments
Tipo:boolean optional
Padrão:false
Especifica se partes da polilinha que podem ser ocultas são desenhadas ou não. As polilinhas podem ser ocultas pela geometria do mapa (por exemplo, edifícios).
Atributo HTML:
  • <gmp-polyline-3d draws-occluded-segments></gmp-polyline-3d>
extruded
Tipo:boolean optional
Padrão:false
Especifica se a poligonal será conectada ao solo. Para extrair uma polilinha, o altitudeMode precisa ser RELATIVE_TO_GROUND ou ABSOLUTE.
Atributo HTML:
  • <gmp-polyline-3d extruded></gmp-polyline-3d>
geodesic
Tipo:boolean optional
Padrão:false
Quando true, as bordas da polilinha são interpretadas como geodésicas e seguem a curvatura da Terra. Quando false, as bordas da poligonal são renderizadas como linhas retas no espaço da tela.
Atributo HTML:
  • <gmp-polyline-3d geodesic></gmp-polyline-3d>
outerColor
Tipo:string optional
A cor externa. Todas as cores CSS3 são aceitas.
Atributo HTML:
  • <gmp-polyline-3d outer-color="string"></gmp-polyline-3d>
outerWidth
Tipo:number optional
A largura externa está entre 0.0 e 1.0. Essa é uma porcentagem da strokeWidth.
Atributo HTML:
  • <gmp-polyline-3d outer-width="number"></gmp-polyline-3d>
strokeColor
Tipo:string optional
A cor do traço. Todas as cores CSS3 são aceitas.
Atributo HTML:
  • <gmp-polyline-3d stroke-color="string"></gmp-polyline-3d>
strokeWidth
Tipo:number optional
A largura do traço em pixels.
Atributo HTML:
  • <gmp-polyline-3d stroke-width="number"></gmp-polyline-3d>
zIndex
Tipo:number optional
O zIndex comparado a outras polilinhas/polígonos.
Atributo HTML:
  • <gmp-polyline-3d z-index="number"></gmp-polyline-3d>
BetaaddEventListener
addEventListener(type, listener[, options])
Parâmetros:
  • type:  string uma string que diferencia maiúsculas de minúsculas que 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ó 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:
Valor de retorno:void
Remove um listener de eventos registrado anteriormente com addEventListener do destino. Consulte removeEventListener.

Interface Polyline3DElementOptions

Interface google.maps.maps3d.Polyline3DElementOptions

Objeto Polyline3DElementOptions usado para definir as propriedades que podem ser definidas em um Polyline3DElement.
altitudeMode optional
Tipo:AltitudeMode optional
Consulte Polyline3DElement.altitudeMode.
coordinates optional
Consulte Polyline3DElement.coordinates.
drawsOccludedSegments optional
Tipo:boolean optional
Consulte Polyline3DElement.drawsOccludedSegments.
extruded optional
Tipo:boolean optional
Consulte Polyline3DElement.extruded.
geodesic optional
Tipo:boolean optional
Consulte Polyline3DElement.geodesic.
outerColor optional
Tipo:string optional
Consulte Polyline3DElement.outerColor.
outerWidth optional
Tipo:number optional
Consulte Polyline3DElement.outerWidth.
strokeColor optional
Tipo:string optional
Consulte Polyline3DElement.strokeColor.
strokeWidth optional
Tipo:number optional
Consulte Polyline3DElement.strokeWidth.
zIndex optional
Tipo:number optional
Consulte Polyline3DElement.zIndex.

Classe Polygon3DElement

Classe google.maps.maps3d.Polygon3DElement

Um polígono 3D (como uma polilinha 3D) define uma série de coordenadas conectadas em uma sequência ordenada. Além disso, os polígonos formam um loop fechado e definem uma região preenchida.

Elemento personalizado:
<gmp-polygon-3d altitude-mode="absolute" draws-occluded-segments extruded fill-color="string" geodesic stroke-color="string" stroke-width="number" z-index="number"></gmp-polygon-3d>

Essa classe estende HTMLElement.

Essa classe implementa Polygon3DElementOptions.

Acesse chamando const {Polygon3DElement} = await google.maps.importLibrary("maps3d"). Consulte Bibliotecas na API Maps JavaScript.
Polygon3DElement
Polygon3DElement([options])
Parâmetros:
Cria um Polygon3DElement com as opções especificadas.
altitudeMode
Tipo:AltitudeMode optional
Especifica como os componentes de altitude nas coordenadas são interpretados.
Atributo HTML:
  • <gmp-polygon-3d altitude-mode="absolute"></gmp-polygon-3d>
  • <gmp-polygon-3d altitude-mode="clamp-to-ground"></gmp-polygon-3d>
  • <gmp-polygon-3d altitude-mode="relative-to-ground"></gmp-polygon-3d>
  • <gmp-polygon-3d altitude-mode="relative-to-mesh"></gmp-polygon-3d>
drawsOccludedSegments
Tipo:boolean optional
Padrão:false
Especifica se partes do polígono que podem ser ocultas são renderizadas ou não. Os polígonos podem ser ocultados pela geometria do mapa (por exemplo, edifícios).
Atributo HTML:
  • <gmp-polygon-3d draws-occluded-segments></gmp-polygon-3d>
extruded
Tipo:boolean optional
Padrão:false
Especifica se o polígono será conectado ao solo. Para extrair um polígono, o altitudeMode precisa ser RELATIVE_TO_GROUND ou ABSOLUTE.
Atributo HTML:
  • <gmp-polygon-3d extruded></gmp-polygon-3d>
fillColor
Tipo:string optional
cor de preenchimento. Todas as cores CSS3 são aceitas.
Atributo HTML:
  • <gmp-polygon-3d fill-color="string"></gmp-polygon-3d>
geodesic
Tipo:boolean optional
Padrão:false
Quando true, as bordas do polígono são interpretadas como geodésicas e seguem a curvatura da Terra. Quando false, as bordas do polígono são renderizadas como linhas retas no espaço da tela.
Atributo HTML:
  • <gmp-polygon-3d geodesic></gmp-polygon-3d>
innerCoordinates
A sequência ordenada de coordenadas que designam um loop fechado. Ao contrário das polilinhas, um polígono pode consistir em um ou mais caminhos, que criam vários recortes dentro dele.
outerCoordinates
A sequência ordenada de coordenadas que designam um loop fechado. A altitude é ignorada em determinados modos e, portanto, é opcional.
strokeColor
Tipo:string optional
A cor do traço. Todas as cores CSS3 são aceitas.
Atributo HTML:
  • <gmp-polygon-3d stroke-color="string"></gmp-polygon-3d>
strokeWidth
Tipo:number optional
A largura do traço em pixels.
Atributo HTML:
  • <gmp-polygon-3d stroke-width="number"></gmp-polygon-3d>
zIndex
Tipo:number optional
O zIndex comparado a outras polilinhas/polígonos.
Atributo HTML:
  • <gmp-polygon-3d z-index="number"></gmp-polygon-3d>
BetaaddEventListener
addEventListener(type, listener[, options])
Parâmetros:
  • type:  string uma string que diferencia maiúsculas de minúsculas que 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ó 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:
Valor de retorno:void
Remove um listener de eventos registrado anteriormente com addEventListener do destino. Consulte removeEventListener.

Interface Polygon3DElementOptions

Interface google.maps.maps3d.Polygon3DElementOptions

Objeto Polygon3DElementOptions usado para definir as propriedades que podem ser definidas em um Polygon3DElement.
altitudeMode optional
Tipo:AltitudeMode optional
Consulte Polygon3DElement.altitudeMode.
drawsOccludedSegments optional
Tipo:boolean optional
Consulte Polygon3DElement.drawsOccludedSegments.
extruded optional
Tipo:boolean optional
Consulte Polygon3DElement.extruded.
fillColor optional
Tipo:string optional
Consulte Polygon3DElement.fillColor.
geodesic optional
Tipo:boolean optional
Consulte Polygon3DElement.geodesic.
innerCoordinates optional
Consulte Polygon3DElement.innerCoordinates.
outerCoordinates optional
Consulte Polygon3DElement.outerCoordinates.
strokeColor optional
Tipo:string optional
Consulte Polygon3DElement.strokeColor.
strokeWidth optional
Tipo:number optional
Consulte Polygon3DElement.strokeWidth.
zIndex optional
Tipo:number optional
Consulte Polygon3DElement.zIndex.

Constantes AltitudeMode

Constantes google.maps.maps3d.AltitudeMode

Especifica como os componentes de altitude nas coordenadas são interpretados.

Acesse chamando const {AltitudeMode} = await google.maps.importLibrary("maps3d"). Consulte Bibliotecas na API Maps JavaScript.
ABSOLUTE Permite expressar objetos em relação ao nível médio do mar. Isso também significa que, se o nível de detalhes do terreno mudar abaixo do objeto, a posição absoluta dele vai permanecer a mesma.
CLAMP_TO_GROUND Permite expressar objetos colocados no chão. Eles vão permanecer no nível do solo, seguindo o terreno, independentemente da altitude fornecida. Se o objeto estiver posicionado sobre um grande corpo d'água, ele será colocado no nível do mar.
RELATIVE_TO_GROUND Permite expressar objetos em relação à superfície do solo. Se o nível de detalhamento do terreno mudar, a posição do objeto vai permanecer constante em relação ao solo. Quando estiver sobre a água, a altitude será interpretada como um valor em metros acima do nível do mar.
RELATIVE_TO_MESH Permite expressar objetos em relação ao maior nível de solo + edifício + superfície de água. Quando estiver sobre a água, será a superfície da água. Quando estiver sobre o terreno, será a superfície do edifício (se houver) ou a superfície do solo (se não houver edifícios).