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 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 a latitude ou longitude. Para limites somente de latitude, use as longitudes oeste e leste de -180 e 180, respectivamente. Para limites apenas de longitude, use as latitudes norte e sul de 90 e -90, respectivamente.
center
O centro do mapa fornecido como uma LatLngAltitude, onde a altitude está em metros acima do nível do solo. Esse não é necessariamente onde a câmera está localizada, já que o campo range afeta a distância dela a partir do centro do mapa. Se não for definido, o padrão será {lat: 0, lng: 0, altitude: 63170000}. 6.3170.000 metros é uma 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 orientação da bússola do mapa, em graus, onde o norte é zero. Quando não há inclinação, qualquer giro será interpretado como orientaçã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 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 serão permitidos. minHeading = 180 e maxHeading = 90 permitem cabeçalho em [0, 90] e cabeçalho em [180, 360]. minHeading = 90 e maxHeading = 180 vão permitir 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á 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 serão permitidos. minHeading = 180 e maxHeading = 90 permitem cabeçalho em [0, 90] e cabeçalho em [180, 360]. minHeading = 90 e maxHeading = 180 vão permitir 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
O rolo da câmera em torno do vetor de visualização, em graus. Para resolver ambiguidades, quando não há inclinação, qualquer rolagem será interpretada como orientaçã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: 
  • 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 Veja as opções. Os eventos personalizados oferecem suporte apenas a 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 do destino um listener de eventos registrado anteriormente com addEventListener. Consulte removeEventListener
gmp-centerchange
function(centerChangeEvent)
Argumentos: 
Este evento é disparado quando a propriedade central de 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 de 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.

Interface Map3DElementOptions

Interface google.maps.maps3d.Map3DElementOptions

Map3DElementOptions usado para definir as propriedades que podem ser definidas em um Map3DElement.
bounds optional
Consulte os Map3DElement.bounds.
center optional
Consulte os Map3DElement.center.
defaultLabelsDisabled optional
Tipo:  boolean optional
Consulte os Map3DElement.defaultLabelsDisabled.
heading optional
Tipo:  number optional
Consulte os Map3DElement.heading.
maxAltitude optional
Tipo:  number optional
Consulte os Map3DElement.maxAltitude.
maxHeading optional
Tipo:  number optional
Consulte os Map3DElement.maxHeading.
maxTilt optional
Tipo:  number optional
Consulte os Map3DElement.maxTilt.
minAltitude optional
Tipo:  number optional
Consulte os Map3DElement.minAltitude.
minHeading optional
Tipo:  number optional
Consulte os Map3DElement.minHeading.
minTilt optional
Tipo:  number optional
Consulte os Map3DElement.minTilt.
range optional
Tipo:  number optional
Consulte os Map3DElement.range.
roll optional
Tipo:  number optional
Consulte os Map3DElement.roll.
tilt optional
Tipo:  number optional
Consulte os Map3DElement.tilt.

Classe SteadyChangeEvent

Classe google.maps.maps3d.SteadyChangeEvent

Esse evento é criado a partir do monitoramento de um estado estável de Map3DElement.

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, toda a renderização da cena atual foi concluída) ou não.

Classe ClickEvent

Classe google.maps.maps3d.ClickEvent

Esse evento é criado clicando 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 ocorreu o evento. Em níveis menos precisos, dados menos precisos serão retornados. 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.

Classe CenterChangeEvent

Classe google.maps.maps3d.CenterChangeEvent

Este evento é criado a partir da alteração da central de monitoramento em Map3DElement.

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 a partir do monitoramento da alteração de título em Map3DElement.

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 é criado a partir da alteração do intervalo de monitoramento em Map3DElement.

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 é criado a partir da alteração da rolagem de monitoramento em Map3DElement.

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 é criado a partir do monitoramento da mudança de inclinação em Map3DElement.

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 as partes da polilinha que podem ser obstruídas são desenhadas ou não. As polilinhas podem ser obstruídas por geometria do mapa (por exemplo, construções).
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, 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 seguirão 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, exceto cores nomeadas estendidas.
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 do strokeWidth.
Atributo HTML:
  • <gmp-polyline-3d outer-width="number"></gmp-polyline-3d>
strokeColor
Tipo:  string optional
cor do traço. Todas as cores CSS3 são permitidas, exceto cores nomeadas estendidas.
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
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 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 Veja as opções. Os eventos personalizados oferecem suporte apenas a 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 do destino um listener de eventos registrado anteriormente com addEventListener. Consulte removeEventListener

Polyline3DElementOptions

Interface google.maps.maps3d.Polyline3DElementOptions

O objeto poly3DElementOptions usado para definir as propriedades que podem ser definidas em um Polyline3DElement.
altitudeMode optional
Tipo:  AltitudeMode optional
Consulte os Polyline3DElement.altitudeMode.
coordinates optional
Consulte os Polyline3DElement.coordinates.
drawsOccludedSegments optional
Tipo:  boolean optional
Padrão:false
Consulte os Polyline3DElement.drawsOccludedSegments.
extruded optional
Tipo:  boolean optional
Padrão:false
Consulte os Polyline3DElement.extruded.
geodesic optional
Tipo:  boolean optional
Padrão:false
Consulte os Polyline3DElement.geodesic.
outerColor optional
Tipo:  string optional
Consulte os Polyline3DElement.outerColor.
outerOpacity optional
Tipo:  number optional
Consulte os Polyline3DElement.outerOpacity.
outerWidth optional
Tipo:  number optional
Consulte os Polyline3DElement.outerWidth.
strokeColor optional
Tipo:  string optional
Consulte os Polyline3DElement.strokeColor.
strokeOpacity optional
Tipo:  number optional
Consulte os Polyline3DElement.strokeOpacity.
strokeWidth optional
Tipo:  number optional
Consulte os Polyline3DElement.strokeWidth.
zIndex optional
Tipo:  number optional
Consulte os 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 as partes do polígono que podem ser obstruídas são desenhadas ou não. Os polígonos podem ser ocultados por 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 deve ser conectado ao solo. Para extrudar um polígono, 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, exceto cores nomeadas estendidas.
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 determinados modos e, portanto, opcional.
strokeColor
Tipo:  string optional
cor do traço. Todas as cores CSS3 são permitidas, exceto cores nomeadas estendidas.
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
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 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 Veja as opções. Os eventos personalizados oferecem suporte apenas a 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 do destino um listener de eventos registrado anteriormente com addEventListener. Consulte removeEventListener

Polygon3DElementOptions

Interface google.maps.maps3d.Polygon3DElementOptions

Polygon3DElementOptions do objeto usado para definir as propriedades que podem ser definidas em um Polygon3DElement.
altitudeMode optional
Tipo:  AltitudeMode optional
Consulte os Polygon3DElement.altitudeMode.
drawsOccludedSegments optional
Tipo:  boolean optional
Padrão:false
Consulte os Polygon3DElement.drawsOccludedSegments.
extruded optional
Tipo:  boolean optional
Padrão:false
Consulte os Polygon3DElement.extruded.
fillColor optional
Tipo:  string optional
Consulte os Polygon3DElement.fillColor.
fillOpacity optional
Tipo:  number optional
Consulte os Polygon3DElement.fillOpacity.
geodesic optional
Tipo:  boolean optional
Padrão:false
Consulte os Polygon3DElement.geodesic.
innerCoordinates optional
Consulte os Polygon3DElement.innerCoordinates.
outerCoordinates optional
Consulte os Polygon3DElement.outerCoordinates.
strokeColor optional
Tipo:  string optional
Consulte os Polygon3DElement.strokeColor.
strokeOpacity optional
Tipo:  number optional
Consulte os Polygon3DElement.strokeOpacity.
strokeWidth optional
Tipo:  number optional
Consulte os Polygon3DElement.strokeWidth.
zIndex optional
Tipo:  number optional
Consulte os Polygon3DElement.zIndex.

Constantes de 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 relativos ao nível médio do mar. Isso também significa que, se o nível de detalhes do terreno mudar abaixo do objeto, sua posição absoluta permanecerá a mesma.
CLAMP_TO_GROUND Permite expressar objetos colocados no chão. Eles permanecem 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 do terreno dos detalhes 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 relativos ao ponto mais alto da superfície do solo + da construção + da água. Quando sobre a água, será a superfície da água; quando sobre o terreno, será a superfície da construção (se houver) ou a superfície do solo (se não houver construções).