3D Maps

Clase Map3DElement

Clase google.maps.maps3d.Map3DElement

Map3DElement es una interfaz HTML para la vista de mapa en 3D.

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>

Esta clase extiende HTMLElement.

Esta clase implementa Map3DElementOptions.

Llama al const {Map3DElement} = await google.maps.importLibrary("maps3d") para acceder.
Consulta Bibliotecas en 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 los objetos fuera de los límites se renderizan de todas formas. Los límites pueden restringir la longitud y la latitud, o bien solo la latitud o la longitud. Para los límites solo de latitud, usa las longitudes oeste y este de -180 y 180, respectivamente. Para los límites que solo incluyen la longitud, usa las latitudes norte y sur de 90 y -90, respectivamente.
center
Es el centro del mapa, que se proporciona como un objeto LatLngAltitude, en el que la altitud se expresa en metros sobre el nivel del suelo. Ten en cuenta que no necesariamente es la ubicación de la cámara, ya que el campo range afecta la distancia de la cámara desde el centro del mapa. Si no se establece, el valor predeterminado es {lat: 0, lng: 0, altitude: 63170000}. 63170000 metros es la altitud máxima permitida (radio de la Tierra multiplicado por 10).
Atributo HTML:
  • <gmp-map-3d center="lat,lng,altitude"></gmp-map-3d>
defaultLabelsDisabled
Tipo:  boolean optional
Predeterminado: false
Cuando es true, no se renderizan las etiquetas predeterminadas del mapa.
Atributo HTML:
  • <gmp-map-3d default-labels-disabled></gmp-map-3d>
defaultUIDisabled
Tipo:  boolean optional
Predeterminado: false
Cuando es true, se inhabilitan todos los botones de la IU predeterminada. No inhabilita el teclado ni los controles por gestos.
Atributo HTML:
  • <gmp-map-3d default-ui-disabled></gmp-map-3d>
heading
Tipo:  number optional
Orientación de la brújula del mapa, en grados, donde el norte geográfico es cero. Cuando no hay inclinación, cualquier giro se interpretará como rumbo.
Atributo HTML:
  • <gmp-map-3d heading="number"></gmp-map-3d>
maxAltitude
Tipo:  number optional
Es la altitud máxima sobre el nivel del 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
Es 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 en el que se permitirán los gestos de rumbo. minHeading = 180 y maxHeading = 90 permitirán el encabezado en [0, 90] y el encabezado en [180, 360]. minHeading = 90 y maxHeading = 180 permitirán el encabezado en [90, 180].
Atributo HTML:
  • <gmp-map-3d max-heading="number"></gmp-map-3d>
maxTilt
Tipo:  number optional
Es 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
Es la altitud mínima sobre el nivel del 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
Es 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 en el que se permitirán los gestos de rumbo. minHeading = 180 y maxHeading = 90 permitirán el encabezado en [0, 90] y el encabezado en [180, 360]. minHeading = 90 y maxHeading = 180 permitirán el encabezado en [90, 180].
Atributo HTML:
  • <gmp-map-3d min-heading="number"></gmp-map-3d>
minTilt
Tipo:  number optional
Es 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
Es la distancia desde la cámara hasta el centro del mapa, en metros.
Atributo HTML:
  • <gmp-map-3d range="number"></gmp-map-3d>
roll
Tipo:  number optional
Es el ángulo de la cámara alrededor del vector de visualización en grados. Para resolver ambigüedades, cuando no hay inclinación, cualquier giro se interpretará como rumbo.
Atributo HTML:
  • <gmp-map-3d roll="number"></gmp-map-3d>
tilt
Tipo:  number optional
Es la inclinación del vector de vista de la cámara en grados. Un vector de vista que mira directamente hacia la Tierra tendría una inclinación de cero grados. Un vector de vista que apunta en dirección opuesta a 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: 
  • type:  string Cadena que distingue mayúsculas de minúsculas y que representa el tipo de evento que se debe escuchar.
  • listener:  EventListener|EventListenerObject Es el objeto que recibe una notificación. Debe ser una función o un objeto con el método handleEvent.
  • options:  boolean|AddEventListenerOptions optional Consulta las opciones. Los eventos personalizados solo admiten capture y passive.
Valor de devolución:  void
Configura una función que se llamará cada vez que se envíe el evento especificado al destino. Consulta addEventListener.
flyCameraAround
flyCameraAround(options)
Parámetros: 
Valor de retorno: Ninguno
Este método hace que la cámara orbite alrededor de una ubicación determinada durante un período específico, y que realice la cantidad de vueltas indicada en ese tiempo.

De forma predeterminada, la cámara orbita en sentido horario. Si se proporciona un número negativo para las órbitas, la cámara orbitará en sentido contrario a las agujas del reloj.

El método es asíncrono porque las animaciones solo pueden comenzar después de que el mapa se haya cargado en una cantidad mínima. El método se devuelve una vez que se inicia la animación.

Si la cantidad de giros es cero, no se producirá ningún giro y la animación se completará inmediatamente después de que comience.
flyCameraTo
flyCameraTo(options)
Parámetros: 
Valor de retorno: Ninguno
Este método mueve la cámara de forma parabólica desde la ubicación actual hasta una ubicación final determinada durante un período determinado.

El método es asíncrono porque las animaciones solo pueden comenzar después de que el mapa se haya cargado en una cantidad mínima. El método se devuelve una vez que se inicia la animación.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Parámetros: 
  • type:  string Cadena que especifica el tipo de evento para el que se quitará un objeto de escucha de eventos.
  • listener:  EventListener|EventListenerObject El objeto de escucha de eventos del controlador de eventos que se quitará del destino del evento.
  • options:  boolean|EventListenerOptions optional Consulta las opciones.
Valor de devolución:  void
Quita del destino un objeto de escucha de eventos registrado previamente con addEventListener. Consulta removeEventListener.
stopCameraAnimation
stopCameraAnimation()
Parámetros: Ninguno
Valor de retorno: Ninguno
Este método detiene cualquier animación de vuelo que se esté ejecutando. La cámara permanece donde está a mitad de la animación; no se teletransporta al punto final.

El método es asíncrono porque las animaciones solo pueden iniciarse o detenerse después de que el mapa haya cargado una cantidad mínima. El método se devuelve una vez que se detiene la animación.
gmp-animationend
function(animationEndEvent)
Argumentos: 
  • animationEndEvent:  Event
Este evento se activa cuando finaliza la animación de vuelo. Este evento se propaga hacia arriba a través del árbol del DOM.
gmp-centerchange
function(centerChangeEvent)
Argumentos: 
  • centerChangeEvent: