3D Maps

Map3DElement (link em inglês) aula

Classe google.maps.maps3d.Map3DElement

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

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 somente a latitude ou longitude. Para limites somente de latitude, use longitudes oeste e leste de -180 e 180, respectivamente. Para limites somente longitude, use as latitudes norte e sul de 90 e -90, respectivamente.
center
O centro do mapa fornecido como uma LatLngAltitude, em que a altitude está em metros acima do nível do solo. Esse não é necessariamente onde a câmera está localizada, porque 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}. 6.317.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 de mapa padrão 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 é zero. Quando não houver inclinação, qualquer rolagem será 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á 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 orientaçã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 gestos de direção serão permitidos. minHeading = 180 e maxHeading = 90 vão permitir títulos em [0, 90] e em [180, 360]. minHeading = 90 e maxHeading = 180 vão permitir a opção de usar a opção [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á 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 gestos de direção serão permitidos. minHeading = 180 e maxHeading = 90 vão permitir títulos em [0, 90] e em [180, 360]. minHeading = 90 e maxHeading = 180 vão permitir a opção de usar a opção [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 rolo da câmera em torno do vetor de visualização em graus. Para resolver ambiguidades, quando não houver inclinação, qualquer rolagem será 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 a 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: 
  • typestring é uma string que diferencia maiúsculas de minúsculas que representa o tipo de evento a ser detectado.
  • listenerEventListener|EventListenerObject o objeto que recebe uma notificação. Precisa ser uma função ou um objeto com o método handleEvent
  • optionsboolean|AddEventListenerOptions optional consulte as opções. Eventos personalizados são compatíveis apenas 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: 
  • typestring uma string que especifica o tipo de evento do qual um listener de eventos será removido.
  • listenerEventListener|EventListenerObject o listener de eventos do manipulador de eventos a ser removido do destino de evento.
  • optionsboolean|EventListenerOptions optional Consulte as opções
Valor de retorno:  void
Remove um listener de eventos registrado anteriormente com addEventListener do destino. Consulte removeEventListener
gmp-centerchange
function(centerChangeEvent)
Argumentos: 
Este evento é disparado quando a propriedade central do Map3DElement é alterada.
gmp-click
function(clickEvent)
Argumentos: 
Este evento é disparado quando o elemento Map3DElement é clicado.
gmp-headingchange
function(headingChangeEvent)
Argumentos: 
Este evento é disparado quando a propriedade de cabeçalho do Map3DElement é alterada.
gmp-rangechange
function(rangeChangeEvent)
Argumentos: 
Este evento é disparado quando a propriedade de intervalo de Map3DElement é alterada.
gmp-rollchange
function(rollChangeEvent)
Argumentos: 
Este evento é disparado quando a propriedade de rolagem do Map3DElement é alterada.
gmp-steadychange
function(steadyChangeEvent)
Argumentos: 
Este evento é disparado quando o estado estável de Map3DElement muda.
gmp-tiltchange
function(tiltChangeEvent)
Argumentos: 
Este evento é disparado quando a propriedade de inclinação do Map3DElement é alterada.

Map3DElementOptions (em inglês) interface

google.maps.maps3d.Map3DElementOptions interface

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

bounds optional
center optional
defaultLabelsDisabled optional
Tipo:  boolean optional
heading optional
Tipo:  number optional
maxAltitude optional
Tipo:  number optional
maxHeading optional
Tipo:  number optional
maxTilt optional
Tipo:  number optional
minAltitude optional
Tipo:  number optional
minHeading optional
Tipo:  number optional
minTilt optional
Tipo:  number optional
range optional
Tipo:  number optional
roll optional
Tipo:  number optional
tilt optional
Tipo:  number optional

SteadyChangeEvent aula

Classe google.maps.maps3d.SteadyChangeEvent

Esse evento é criado com base no monitoramento de um estado estável Map3DElement. Esse evento surge na árvore do 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 Map3DElement é estável (ou seja, se toda a renderização da cena atual foi concluída) ou não.

ClickEvent aula

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 menos precisos, serão retornados dados 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 a partir de posições mais altas da câmera. Esse evento surge na árvore do DOM.

CenterChangeEvent aula

Classe google.maps.maps3d.CenterChangeEvent

Este evento foi criado com base na alteração da central de monitoramento em Map3DElement. Esse evento surge na árvore do DOM.

Essa classe estende Event:

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

HeadingChangeEvent aula

Classe google.maps.maps3d.HeadingChangeEvent

Este evento é criado com base na alteração de cabeçalho do monitoramento em Map3DElement. Esse evento surge na árvore do DOM.

Essa classe estende Event:

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

RangeChangeEvent aula

Classe google.maps.maps3d.RangeChangeEvent

Este evento foi criado com base na alteração do intervalo de monitoramento em Map3DElement. Esse evento surge na árvore do DOM.

Essa classe estende Event:

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

RollChangeEvent aula

Classe google.maps.maps3d.RollChangeEvent

Este evento é criado com base no monitoramento de alteração no registro de Map3DElement. Esse evento surge na árvore do DOM.

Essa classe estende Event:

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

TiltChangeEvent aula

Classe google.maps.maps3d.TiltChangeEvent

Este evento é criado com base no monitoramento da alteração de inclinação em Map3DElement. Esse evento surge na árvore do DOM.

Essa classe estende Event:

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

Polyline3DElement (link em inglês) aula

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 alguns modos e, portanto, opcional.
drawsOccludedSegments
Tipo:  boolean optional
Padrão:false
Especifica se as partes da polilinha que poderiam ser obstruídas são desenhadas ou não. As polilinhas podem ser obstruídas pela geometria do mapa (por exemplo, prédios).
Atributo HTML:
  • <gmp-polyline-3d draws-occluded-segments></gmp-polyline-3d>
extruded
Tipo:  boolean optional
Padrão:false
Especifica se a polilinha deve ser conectada ao solo. Para extrudar 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 polilinha 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 permitidas.
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 de 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 permitidas.
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: 
  • typestring é uma string que diferencia maiúsculas de minúsculas que representa o tipo de evento a ser detectado.
  • listenerEventListener|EventListenerObject o objeto que recebe uma notificação. Precisa ser uma função ou um objeto com o método handleEvent
  • optionsboolean|AddEventListenerOptions optional consulte as opções. Eventos personalizados são compatíveis apenas 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: 
  • typestring uma string que especifica o tipo de evento do qual um listener de eventos será removido.
  • listenerEventListener|EventListenerObject o listener de eventos do manipulador de eventos a ser removido do destino de evento.
  • optionsboolean|EventListenerOptions optional Consulte as opções
Valor de retorno:  void
Remove um listener de eventos registrado anteriormente com addEventListener do destino. Consulte removeEventListener

Polyline3DElementOptions (em inglês) interface

google.maps.maps3d.Polyline3DElementOptions interface

Objeto Polyline3DElementOptions usado para definir as propriedades que podem ser configuradas em um Polyline3DElement.

altitudeMode optional
Tipo:  AltitudeMode optional
coordinates optional
drawsOccludedSegments optional
Tipo:  boolean optional
Padrão:false
extruded optional
Tipo:  boolean optional
Padrão:false
geodesic optional
Tipo:  boolean optional
Padrão:false
outerColor optional
Tipo:  string optional
outerOpacity optional
Tipo:  number optional
outerWidth optional
Tipo:  number optional
strokeColor optional
Tipo:  string optional
strokeOpacity optional
Tipo:  number optional
strokeWidth optional
Tipo:  number optional
zIndex optional
Tipo:  number optional

Polygon3DElement (link em inglês) aula

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 as partes do polígono que podem ser obstruídas são desenhadas ou não. Os polígonos podem ser obstruídos 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 extrudar 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 permitidas.
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 cortes dentro do polígono.
outerCoordinates
A sequência ordenada de coordenadas que designam um loop fechado. A altitude é ignorada em alguns modos e, portanto, opcional.
strokeColor
Tipo:  string optional
A cor do traço. Todas as cores CSS3 são permitidas.
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: 
  • typestring é uma string que diferencia maiúsculas de minúsculas que representa o tipo de evento a ser detectado.
  • listenerEventListener|EventListenerObject o objeto que recebe uma notificação. Precisa ser uma função ou um objeto com o método handleEvent
  • optionsboolean|AddEventListenerOptions optional consulte as opções. Eventos personalizados são compatíveis apenas 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: 
  • typestring uma string que especifica o tipo de evento do qual um listener de eventos será removido.
  • listenerEventListener|EventListenerObject o listener de eventos do manipulador de eventos a ser removido do destino de evento.
  • optionsboolean|EventListenerOptions optional Consulte as opções
Valor de retorno:  void
Remove um listener de eventos registrado anteriormente com addEventListener do destino. Consulte removeEventListener

Polygon3DElementOptions (em inglês) interface

google.maps.maps3d.Polygon3DElementOptions interface

Objeto Polygon3DElementOptions usado para definir as propriedades que podem ser definidas em um Polygon3DElement.

altitudeMode optional
Tipo:  AltitudeMode optional
drawsOccludedSegments optional
Tipo:  boolean optional
Padrão:false
extruded optional
Tipo:  boolean optional
Padrão:false
fillColor optional
Tipo:  string optional
fillOpacity optional
Tipo:  number optional
geodesic optional
Tipo:  boolean optional
Padrão:false
innerCoordinates optional
outerCoordinates optional
strokeColor optional
Tipo:  string optional
strokeOpacity optional
Tipo:  number optional
strokeWidth optional
Tipo:  number optional
zIndex optional
Tipo:  number optional

AltitudeMode constantes

google.maps.maps3d.AltitudeMode constantes

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 relativos ao nível médio do mar. Isso também significa que se o nível de detalhe do terreno mudar abaixo do objeto, sua posição absoluta permanecerá a mesma.
CLAMP_TO_GROUND Permite expressar objetos colocados no solo. Elas permanecerão no nível do solo seguindo o terreno, independentemente da altitude fornecida. Se o objeto for posicionado sobre um grande corpo de água, ele será colocado no nível do mar.
RELATIVE_TO_GROUND Permite expressar objetos relativos à superfície do solo. Se o nível de detalhe do terreno mudar, a posição do objeto permanecerá constante em relação ao solo. Quando sobre a água, a altitude será interpretada como um valor em metros acima do nível do mar.
RELATIVE_TO_MESH Permite expressar objetos relacionados ao mais alto do solo+edifício+superfície da água. Quando estiver sobre a água, esta será a superfície da água; sobre o terreno, será a superfície da construção (se houver) ou a superfície do solo (se não houver construções).