3D Maps

Elemento Map3D clase

Clase google.maps.maps3d.Map3DElement

Map3DElement es una interfaz HTML para la vista 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>

Esta clase extiende HTMLElement

Esta clase implementa Map3DElementOptions

Para acceder, llama a const {Map3DElement} = await google.maps.importLibrary("maps3d"). Consulta el artículo Bibliotecas de la API de Maps JavaScript.

Map3DElement
Map3DElement([options])
Parámetros: 
bounds
Cuando se establece, restringe la posición de la cámara dentro de los límites de latitud y longitud especificados. Ten en cuenta que todavía se renderizan los objetos fuera de los límites. Los límites pueden restringir la longitud y la latitud, o solo la latitud y la longitud. Para los límites que solo son de latitud, usa las longitudes oeste y este de -180 y 180, respectivamente. Para los límites solo de longitud, usa las latitudes norte y sur de 90 y -90, respectivamente.
center
Es el centro del mapa expresado como un valor LatLngAltitude, cuya altitud es en metros sobre el nivel del suelo. Ten en cuenta que no es necesariamente el lugar donde se encuentra la cámara, ya que el campo range afecta la distancia de la cámara desde el centro del mapa. Si no está configurado, el valor predeterminado es {lat: 0, lng: 0, altitude: 63170000}. La altitud máxima permitida es de 6,317,0000 metros (el radio de la Tierra multiplicado por 10).
Atributo HTML:
  • <gmp-map-3d center="lat,lng,altitude"></gmp-map-3d>
defaultLabelsDisabled
Tipo:  boolean optional
Valor predeterminado: false
Cuando es true, no se renderizan las etiquetas de mapa predeterminadas.
Atributo HTML:
  • <gmp-map-3d default-labels-disabled></gmp-map-3d>
heading
Tipo:  number optional
La orientación del mapa según la brújula, en grados, cuando el norte orientado es cero. Cuando no hay inclinación, cualquier lanzamiento se interpretará como una orientación.
Atributo HTML:
  • <gmp-map-3d heading="number"></gmp-map-3d>
maxAltitude
Tipo:  number optional
La altitud máxima sobre el suelo que se mostrará en el mapa. Un valor válido está entre 0 y 63170000 metros (el radio de la Tierra multiplicado por 10).
Atributo HTML:
  • <gmp-map-3d max-altitude="number"></gmp-map-3d>
maxHeading
Tipo:  number optional
El ángulo máximo de orientación (rotación) del mapa. Un valor válido está entre 0 y 360 grados. minHeading y maxHeading representan un intervalo de 360 grados o inferior en el que se permitirán los gestos de encabezado. minHeading = 180 y maxHeading = 90 permitirán la orientación en [0, 90] y la orientación en [180, 360]. minHeading = 90 y maxHeading = 180 permitirán la orientación en [90, 180].
Atributo HTML:
  • <gmp-map-3d max-heading="number"></gmp-map-3d>
maxTilt
Tipo:  number optional
El ángulo de incidencia máximo del mapa. Un valor válido está entre 0 y 90 grados.
Atributo HTML:
  • <gmp-map-3d max-tilt="number"></gmp-map-3d>
minAltitude
Tipo:  number optional
La altitud mínima sobre el suelo que se mostrará en el mapa. Un valor válido está entre 0 y 63170000 metros (el radio de la Tierra multiplicado por 10).
Atributo HTML:
  • <gmp-map-3d min-altitude="number"></gmp-map-3d>
minHeading
Tipo:  number optional
El ángulo mínimo de orientación (rotación) del mapa. Un valor válido está entre 0 y 360 grados. minHeading y maxHeading representan un intervalo de 360 grados o inferior en el que se permitirán los gestos de encabezado. minHeading = 180 y maxHeading = 90 permitirán la orientación en [0, 90] y la orientación en [180, 360]. minHeading = 90 y maxHeading = 180 permitirán la orientación en [90, 180].
Atributo HTML:
  • <gmp-map-3d min-heading="number"></gmp-map-3d>
minTilt
Tipo:  number optional
El ángulo de incidencia mínimo del mapa. Un valor válido está entre 0 y 90 grados.
Atributo HTML:
  • <gmp-map-3d min-tilt="number"></gmp-map-3d>
range
Tipo:  number optional
La distancia en metros entre la cámara y el centro del mapa.
Atributo HTML:
  • <gmp-map-3d range="number"></gmp-map-3d>
roll
Tipo:  number optional
El giro de la cámara alrededor del vector de vista en grados. Para resolver ambigüedades, cuando no haya inclinación, cualquier giro se interpretará como una orientación.
Atributo HTML:
  • <gmp-map-3d roll="number"></gmp-map-3d>
tilt
Tipo:  number optional
La inclinación del vector de vista de la cámara en grados. Un vector de vista que mirara directamente la Tierra tendría una inclinación de cero grados. Un vector de vista que apunte hacia afuera de la Tierra tendría una inclinación de 180 grados.
Atributo HTML:
  • <gmp-map-3d tilt="number"></gmp-map-3d>
BetaaddEventListener
addEventListener(type, listener[, options])
Parámetros: 
  • typestring Es una cadena que distingue mayúsculas de minúsculas que representa el tipo de evento que se debe detectar.
  • listenerEventListener|EventListenerObject El objeto que recibe una notificación. Debe ser una función o un objeto con el método handleEvent
  • optionsboolean|AddEventListenerOptions optional Consulta las opciones. Los eventos personalizados solo admiten capture y passive.
Valor que se muestra:  void
Configura una función a la que se llamará cada vez que se entregue el evento especificado al destino. Consulta addEventListener.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Parámetros: 
  • typestring Es una cadena que especifica el tipo de evento para el que se quitará un objeto de escucha de eventos.
  • listenerEventListener|EventListenerObject El objeto de escucha de eventos del controlador de eventos que se quitará del destino del evento.
  • optionsboolean|EventListenerOptions optional Ver opciones
Valor que se muestra:  void
Elimina un objeto de escucha de eventos registrado previamente con addEventListener del destino. Consulta removeEventListener.
gmp-centerchange
function(centerChangeEvent)
Argumentos: 
Este evento se activa cuando cambia la propiedad central de Map3DElement.
gmp-click
function(clickEvent)
Argumentos: 
Este evento se activa cuando se hace clic en el elemento Map3DElement.
gmp-headingchange
function(headingChangeEvent)
Argumentos: 
Este evento se activa cuando cambia la propiedad de encabezado de Map3DElement.
gmp-rangechange
function(rangeChangeEvent)
Argumentos: 
Este evento se activa cuando cambia la propiedad de rango de Map3DElement.
gmp-rollchange
function(rollChangeEvent)
Argumentos: 
Este evento se activa cuando cambia la propiedad de lanzamiento de Map3DElement.
gmp-steadychange
function(steadyChangeEvent)
Argumentos: 
Este evento se activa cuando cambia el estado estable de Map3DElement.
gmp-tiltchange
function(tiltChangeEvent)
Argumentos: 
Este evento se activa cuando cambia la propiedad de inclinación de Map3DElement.

Map3DElementOptions interfaz

google.maps.maps3d.Map3DElementOptions interfaz

Es el objeto Map3DElementOptions que se usa para definir las propiedades que se pueden establecer en un Map3DElement.

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

SteadyChangeEvent clase

Clase google.maps.maps3d.SteadyChangeEvent

Este evento se crea a partir de la supervisión de un estado estable de Map3DElement. Este evento surge a través del árbol del DOM.

Esta clase extiende Event

Para acceder, llama a const {SteadyChangeEvent} = await google.maps.importLibrary("maps3d"). Consulta el artículo Bibliotecas de la API de Maps JavaScript.

isSteady
Tipo:  boolean
Indica si Map3DElement es estable (es decir, se completó toda la renderización de la escena actual) o no.

ClickEvent clase

Clase google.maps.maps3d.ClickEvent

Este evento se crea a partir de un clic en un Map3DElement.

Esta clase extiende Event

Para acceder, llama a const {ClickEvent} = await google.maps.importLibrary("maps3d"). Consulta el artículo Bibliotecas de la API de Maps JavaScript.

position
Tipo:  LatLngAltitude optional
La latitud, la longitud y la altitud que estaban por debajo del cursor cuando ocurrió el evento. Ten en cuenta que, a niveles más generales, se mostrarán datos menos precisos. Además, es posible que se obtenga la elevación del suelo marino para obtener el valor de altitud al hacer clic en la superficie del agua desde posiciones más altas de la cámara. Este evento surge a través del árbol del DOM.

CenterChangeEvent clase

Clase google.maps.maps3d.CenterChangeEvent

Este evento se creó a partir del cambio del centro de supervisión el Map3DElement. Este evento surge a través del árbol del DOM.

Esta clase extiende Event

Para acceder, llama a const {CenterChangeEvent} = await google.maps.importLibrary("maps3d"). Consulta el artículo Bibliotecas de la API de Maps JavaScript.

HeadingChangeEvent clase

Clase google.maps.maps3d.HeadingChangeEvent

Este evento se crea a partir de la supervisión del cambio de encabezado en Map3DElement. Este evento surge a través del árbol del DOM.

Esta clase extiende Event

Para acceder, llama a const {HeadingChangeEvent} = await google.maps.importLibrary("maps3d"). Consulta el artículo Bibliotecas de la API de Maps JavaScript.

RangeChangeEvent clase

Clase google.maps.maps3d.RangeChangeEvent

Este evento se crea a partir del cambio de rango de supervisión el Map3DElement. Este evento surge a través del árbol del DOM.

Esta clase extiende Event

Para acceder, llama a const {RangeChangeEvent} = await google.maps.importLibrary("maps3d"). Consulta el artículo Bibliotecas de la API de Maps JavaScript.

RollChangeEvent clase

Clase google.maps.maps3d.RollChangeEvent

Este evento se crea a partir de la supervisión del cambio de lanzamiento en Map3DElement. Este evento surge a través del árbol del DOM.

Esta clase extiende Event

Para acceder, llama a const {RollChangeEvent} = await google.maps.importLibrary("maps3d"). Consulta el artículo Bibliotecas de la API de Maps JavaScript.

TiltChangeEvent clase

Clase google.maps.maps3d.TiltChangeEvent

Este evento se crea a partir de la supervisión del cambio de inclinación en Map3DElement. Este evento surge a través del árbol del DOM.

Esta clase extiende Event

Para acceder, llama a const {TiltChangeEvent} = await google.maps.importLibrary("maps3d"). Consulta el artículo Bibliotecas de la API de Maps JavaScript.

Polyline3DElement clase

Clase google.maps.maps3d.Polyline3DElement

Una polilínea 3D es una superposición lineal de segmentos de líneas conectados en un 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>

Esta clase extiende HTMLElement

Esta clase implementa Polyline3DElementOptions

Para acceder, llama a const {Polyline3DElement} = await google.maps.importLibrary("maps3d"). Consulta el artículo Bibliotecas de la API de Maps JavaScript.

Polyline3DElement
Polyline3DElement([options])
Parámetros: 
altitudeMode
Tipo:  AltitudeMode optional
Valor predeterminado: AltitudeMode.ABSOLUTE
Especifica cómo se interpretan los componentes de altitud en las coordenadas.
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
Secuencia ordenada de coordenadas de la polilínea En algunos modos, la altitud se ignora y, por lo tanto, es opcional.
drawsOccludedSegments
Tipo:  boolean optional
Valor predeterminado: false
Especifica si se dibujan o no las partes de la polilínea que podrían ocultarse. Las polilíneas se pueden ocultar según la geometría del mapa (p.ej., los edificios).
Atributo HTML:
  • <gmp-polyline-3d draws-occluded-segments></gmp-polyline-3d>
extruded
Tipo:  boolean optional
Valor predeterminado: false
Especifica si se debe conectar la polilínea al suelo. Para extruir una polilínea, el elemento altitudeMode debe ser RELATIVE_TO_GROUND o ABSOLUTE.
Atributo HTML:
  • <gmp-polyline-3d extruded></gmp-polyline-3d>
geodesic
Tipo:  boolean optional
Valor predeterminado: false
Cuando el valor es true, los bordes de la polilínea se interpretan como geodésicos y seguirán la curvatura de la Tierra. Cuando se establece en false, los bordes de la polilínea se renderizan como líneas rectas en el espacio de la pantalla.
Atributo HTML:
  • <gmp-polyline-3d geodesic></gmp-polyline-3d>
outerColor
Tipo:  string optional
El color exterior. Se admiten todos los colores CSS3.
Atributo HTML:
  • <gmp-polyline-3d outer-color="string"></gmp-polyline-3d>
outerOpacity
Tipo:  number optional
La opacidad externa entre 0.0 y 1.0.
Atributo HTML:
  • <gmp-polyline-3d outer-opacity="number"></gmp-polyline-3d>
outerWidth
Tipo:  number optional
El ancho exterior está entre 0.0 y 1.0. Este es un porcentaje de strokeWidth.
Atributo HTML:
  • <gmp-polyline-3d outer-width="number"></gmp-polyline-3d>
strokeColor
Tipo:  string optional
color del trazo. Se admiten todos los colores CSS3.
Atributo HTML:
  • <gmp-polyline-3d stroke-color="string"></gmp-polyline-3d>
strokeOpacity
Tipo:  number optional
La opacidad de trazo entre 0.0 y 1.0.
Atributo HTML:
  • <gmp-polyline-3d stroke-opacity="number"></gmp-polyline-3d>
strokeWidth
Tipo:  number optional
ancho de trazo en píxeles.
Atributo HTML:
  • <gmp-polyline-3d stroke-width="number"></gmp-polyline-3d>
zIndex
Tipo:  number optional
zIndex en comparación con otros polígonos
Atributo HTML:
  • <gmp-polyline-3d z-index="number"></gmp-polyline-3d>
BetaaddEventListener
addEventListener(type, listener[, options])
Parámetros: 
  • typestring Es una cadena que distingue mayúsculas de minúsculas que representa el tipo de evento que se debe detectar.
  • listenerEventListener|EventListenerObject El objeto que recibe una notificación. Debe ser una función o un objeto con el método handleEvent
  • optionsboolean|AddEventListenerOptions optional Consulta las opciones. Los eventos personalizados solo admiten capture y passive.
Valor que se muestra:  void
Configura una función a la que se llamará cada vez que se entregue el evento especificado al destino. Consulta addEventListener.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Parámetros: 
  • typestring Es una cadena que especifica el tipo de evento para el que se quitará un objeto de escucha de eventos.
  • listenerEventListener|EventListenerObject El objeto de escucha de eventos del controlador de eventos que se quitará del destino del evento.
  • optionsboolean|EventListenerOptions optional Ver opciones
Valor que se muestra:  void
Elimina un objeto de escucha de eventos registrado previamente con addEventListener del destino. Consulta removeEventListener.

Polyline3DElementOptions interfaz

google.maps.maps3d.Polyline3DElementOptions interfaz

Es el objeto Polyline3DElementOptions que se usa para definir las propiedades que se pueden establecer en un Polyline3DElement.

altitudeMode optional
Tipo:  AltitudeMode optional
Valor predeterminado: AltitudeMode.ABSOLUTE
coordinates optional
drawsOccludedSegments optional
Tipo:  boolean optional
Valor predeterminado: false
extruded optional
Tipo:  boolean optional
Valor predeterminado: false
geodesic optional
Tipo:  boolean optional
Valor predeterminado: 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 clase

Clase google.maps.maps3d.Polygon3DElement

Un polígono 3D (como una polilínea 3D) define una serie de coordenadas conectadas en una secuencia ordenada. Además, los polígonos forman un bucle cerrado y definen una región con relleno.

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>

Esta clase extiende HTMLElement

Esta clase implementa Polygon3DElementOptions

Para acceder, llama a const {Polygon3DElement} = await google.maps.importLibrary("maps3d"). Consulta el artículo Bibliotecas de la API de Maps JavaScript.

Polygon3DElement
Polygon3DElement([options])
Parámetros: 
altitudeMode
Tipo:  AltitudeMode optional
Valor predeterminado: AltitudeMode.ABSOLUTE
Especifica cómo se interpretan los componentes de altitud en las coordenadas.
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
Valor predeterminado: false
Especifica si se dibujan o no las partes del polígono que podrían ocultarse. La geometría del mapa (p.ej., los edificios) puede ocultar los polígonos.
Atributo HTML:
  • <gmp-polygon-3d draws-occluded-segments></gmp-polygon-3d>
extruded
Tipo:  boolean optional
Valor predeterminado: false
Especifica si el polígono se debe conectar al suelo. Para extruir un polígono, el altitudeMode debe ser RELATIVE_TO_GROUND o ABSOLUTE.
Atributo HTML:
  • <gmp-polygon-3d extruded></gmp-polygon-3d>
fillColor
Tipo:  string optional
color de relleno. Se admiten todos los colores CSS3.
Atributo HTML:
  • <gmp-polygon-3d fill-color="string"></gmp-polygon-3d>
fillOpacity
Tipo:  number optional
opacidad de relleno entre 0.0 y 1.0.
Atributo HTML:
  • <gmp-polygon-3d fill-opacity="number"></gmp-polygon-3d>
geodesic
Tipo:  boolean optional
Valor predeterminado: false
Cuando el valor es true, los bordes del polígono se interpretan como geodésicos y seguirán la curvatura de la Tierra. Cuando el valor es false, los bordes del polígono se renderizan como líneas rectas en el espacio de la pantalla.
Atributo HTML:
  • <gmp-polygon-3d geodesic></gmp-polygon-3d>
innerCoordinates
Secuencia ordenada de coordenadas que designa un bucle cerrado. A diferencia de las polilíneas, un polígono puede constar de uno o más trazados, los cuales crean varios cortes dentro del polígono.
outerCoordinates
Secuencia ordenada de coordenadas que designa un bucle cerrado. En algunos modos, la altitud se ignora y, por lo tanto, es opcional.
strokeColor
Tipo:  string optional
color del trazo. Se admiten todos los colores CSS3.
Atributo HTML:
  • <gmp-polygon-3d stroke-color="string"></gmp-polygon-3d>
strokeOpacity
Tipo:  number optional
La opacidad de trazo entre 0.0 y 1.0.
Atributo HTML:
  • <gmp-polygon-3d stroke-opacity="number"></gmp-polygon-3d>
strokeWidth
Tipo:  number optional
ancho de trazo en píxeles.
Atributo HTML:
  • <gmp-polygon-3d stroke-width="number"></gmp-polygon-3d>
zIndex
Tipo:  number optional
zIndex en comparación con otros polígonos
Atributo HTML:
  • <gmp-polygon-3d z-index="number"></gmp-polygon-3d>
BetaaddEventListener
addEventListener(type, listener[, options])
Parámetros: 
  • typestring Es una cadena que distingue mayúsculas de minúsculas que representa el tipo de evento que se debe detectar.
  • listenerEventListener|EventListenerObject El objeto que recibe una notificación. Debe ser una función o un objeto con el método handleEvent
  • optionsboolean|AddEventListenerOptions optional Consulta las opciones. Los eventos personalizados solo admiten capture y passive.
Valor que se muestra:  void
Configura una función a la que se llamará cada vez que se entregue el evento especificado al destino. Consulta addEventListener.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Parámetros: 
  • typestring Es una cadena que especifica el tipo de evento para el que se quitará un objeto de escucha de eventos.
  • listenerEventListener|EventListenerObject El objeto de escucha de eventos del controlador de eventos que se quitará del destino del evento.
  • optionsboolean|EventListenerOptions optional Ver opciones
Valor que se muestra:  void
Elimina un objeto de escucha de eventos registrado previamente con addEventListener del destino. Consulta removeEventListener.

Polygon3DElementOptions. interfaz

google.maps.maps3d.Polygon3DElementOptions interfaz

Objeto Polygon3DElementOptions para definir las propiedades que se pueden establecer en un objeto Polygon3DElement.

altitudeMode optional
Tipo:  AltitudeMode optional
Valor predeterminado: AltitudeMode.ABSOLUTE
drawsOccludedSegments optional
Tipo:  boolean optional
Valor predeterminado: false
extruded optional
Tipo:  boolean optional
Valor predeterminado: false
fillColor optional
Tipo:  string optional
fillOpacity optional
Tipo:  number optional
geodesic optional
Tipo:  boolean optional
Valor predeterminado: 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 cómo se interpretan los componentes de altitud en las coordenadas.

Para acceder, llama a const {AltitudeMode} = await google.maps.importLibrary("maps3d"). Consulta el artículo Bibliotecas de la API de Maps JavaScript.

ABSOLUTE Permite expresar objetos relacionados con el nivel medio del mar. Esto también significa que, si el nivel de detalle del terreno cambia debajo del objeto, su posición absoluta seguirá siendo la misma.
CLAMP_TO_GROUND Permite expresar los objetos que se colocan en el suelo. Permanecerán a nivel del suelo siguiendo el terreno, independientemente de la altitud que se proporcione. Si el objeto se coloca sobre una masa principal de agua, se colocará al nivel del mar.
RELATIVE_TO_GROUND Permite expresar objetos relativos a la superficie del suelo. Si cambia el nivel de detalle del terreno, la posición del objeto se mantendrá constante respecto del suelo. Cuando esté sobre el agua, la altitud se interpretará como un valor en metros sobre el nivel del mar.
RELATIVE_TO_MESH Permite expresar objetos relativos a la mayor altura del suelo, el edificio y la superficie del agua. Cuando esté sobre el agua, será la superficie del agua. cuando sobre el terreno, se tratará de la superficie del edificio (si está presente) o de la superficie terrestre (si no hay edificios).