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 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>
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.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Parâmetros:
Valor de retorno:void
Remove um listener de eventos registrado anteriormente com addEventListener do destino. Consulte removeEventListener.
gmp-centerchange
function(centerChangeEvent)
Argumentos: 
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: 
Esse evento é acionado quando a propriedade de direção do Map3DElement muda.
gmp-rangechange
function(rangeChangeEvent)
Argumentos: 
Esse evento é acionado quando a propriedade de alcance do Map3DElement muda.
gmp-rollchange
function(rollChangeEvent)
Argumentos: 
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: 
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.
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.

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 ClickEvent

Classe google.maps.maps3d.ClickEvent

Esse evento é criado ao clicar em um Map3DElement.

Essa classe estende Event.

Acesse chamando const {ClickEvent} = 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 CenterChangeEvent

Classe google.maps.maps3d.CenterChangeEvent

Este evento foi criado a partir da mudança da central de monitoramento em Map3DElement. Esse evento é transmitido pela árvore DOM.

Essa classe estende Event.

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

Classe HeadingChangeEvent

Classe google.maps.maps3d.HeadingChangeEvent

Este evento é criado ao monitorar a mudança de título em Map3DElement. Esse evento é transmitido pela árvore DOM.

Essa classe estende Event.

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

Classe RangeChangeEvent

Classe google.maps.maps3d.RangeChangeEvent

Este evento foi criado a partir da mudança do intervalo de monitoramento em Map3DElement. Esse evento é transmitido pela árvore DOM.

Essa classe estende Event.

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

Classe RollChangeEvent

Classe google.maps.maps3d.RollChangeEvent

Este evento foi criado com base na mudança de rolagem de monitoramento em Map3DElement. Esse evento é transmitido pela árvore DOM.

Essa classe estende Event.

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

Classe TiltChangeEvent

Classe google.maps.maps3d.TiltChangeEvent

Este evento foi criado ao monitorar a mudança de inclinação em Map3DElement. Esse evento é transmitido pela árvore DOM.

Essa classe estende Event.

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

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-opacity="number" outer-width="number" stroke-color="string" stroke-opacity="number" 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:
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>
outerOpacity
Tipo:number optional
A opacidade externa entre 0.0 e 1.0.
Atributo HTML:
  • <gmp-polyline-3d outer-opacity="number"></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>
strokeOpacity
Tipo:number optional
A opacidade do traço entre 0.0 e 1.0.
Atributo HTML:
  • <gmp-polyline-3d stroke-opacity="number"></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
Padrão:false
Consulte Polyline3DElement.drawsOccludedSegments.
extruded optional
Tipo:boolean optional
Padrão:false
Consulte Polyline3DElement.extruded.
geodesic optional
Tipo:boolean optional
Padrão:false
Consulte Polyline3DElement.geodesic.
outerColor optional
Tipo:string optional
Consulte Polyline3DElement.outerColor.
outerOpacity optional
Tipo:number optional
Consulte Polyline3DElement.outerOpacity.
outerWidth optional
Tipo:number optional
Consulte Polyline3DElement.outerWidth.
strokeColor optional
Tipo:string optional
Consulte Polyline3DElement.strokeColor.
strokeOpacity optional
Tipo:number optional
Consulte Polyline3DElement.strokeOpacity.
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" fill-opacity="number" geodesic stroke-color="string" stroke-opacity="number" 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:
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>
fillOpacity
Tipo:number optional
A opacidade do preenchimento entre 0,0 e 1,0.
Atributo HTML:
  • <gmp-polygon-3d fill-opacity="number"></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>
strokeOpacity
Tipo:number optional
A opacidade do traço entre 0.0 e 1.0.
Atributo HTML:
  • <gmp-polygon-3d stroke-opacity="number"></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
Padrão:false
Consulte Polygon3DElement.drawsOccludedSegments.
extruded optional
Tipo:boolean optional
Padrão:false
Consulte Polygon3DElement.extruded.
fillColor optional
Tipo:string optional
Consulte Polygon3DElement.fillColor.
fillOpacity optional
Tipo:number optional
Consulte Polygon3DElement.fillOpacity.
geodesic optional
Tipo:boolean optional
Padrão:false
Consulte Polygon3DElement.geodesic.
innerCoordinates optional
Consulte Polygon3DElement.innerCoordinates.
outerCoordinates optional
Consulte Polygon3DElement.outerCoordinates.
strokeColor optional
Tipo:string optional
Consulte Polygon3DElement.strokeColor.
strokeOpacity optional
Tipo:number optional
Consulte Polygon3DElement.strokeOpacity.
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).