3D Maps

Clase Map3DElement

google.maps.maps3d.Map3DElement class
extends HTMLElement
implements Map3DElementOptions
library "maps3d"

Map3DElement es una interfaz HTML para la vista de mapa en 3D. Ten en cuenta que se debe configurar el mode para que el mapa en 3D comience a renderizarse.

                  
<gmp-map-3d
  autofits-camera-animation="value-name"
  camera-position="lat,lng,altitude"
  center="lat,lng,altitude"
  default-ui-hidden
  description="string"
  fov="number"
  gesture-handling="value-name"
  heading="number"
  internal-usage-attribution-ids="id1 id2"
  map-id="string"
  max-altitude="number"
  max-heading="number"
  max-tilt="number"
  min-altitude="number"
  min-heading="number"
  min-tilt="number"
  mode="value-name"
  range="number"
  roll="number"
  tilt="number">
</gmp-map-3d>

const {Map3DElement} = await google.maps.importLibrary("maps3d");

Constructor
Map3DElement	Map3DElement([options]) Parámetros: options: Map3DElementOptions optional

Propiedades
autofitsCameraAnimation attr: autofits-camera-animation	Aviso: Solo está disponible en el canal v=alpha. Tipo de entrada: AutofitsCameraAnimation optional Tipo de salida: AutofitsCameraAnimation optional La configuración predeterminada es none. Es la animación que se usará para el ajuste automático de la cámara. Atributo HTML: autofits-camera-animation="value-name"
bounds	Tipo de entrada: LatLngBounds|LatLngBoundsLiteral optional Tipo de salida: LatLngBounds optional 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 que están fuera de los límites se siguen renderizando. Los límites pueden restringir tanto la longitud como la latitud, o bien solo una de ellas. Para los límites de solo latitud, usa las longitudes oeste y este de -180 y 180, respectivamente. Para los límites de solo longitud, usa las latitudes norte y sur de 90 y -90, respectivamente.
cameraPosition attr: camera-position	Tipo de entrada: LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional Tipo de salida: LatLngAltitude optional Es la posición de la cámara, que se proporciona como un LatLngAltitude. Se derivará si se omite. Si se omite center, pero se especifica cameraPosition, center se derivará de cameraPosition.. Si ambos se actualizan en el mismo bucle de ejecución, se favorecerá cameraPosition. Los campos cameraPosition y center se pueden derivar uno a uno entre sí en el contexto de la orientación, el rango, el balanceo y la inclinación compartidos. Atributo HTML: camera-position="lat,lng,altitude"
center attr: center	Tipo de entrada: LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional Tipo de salida: LatLngAltitude optional Es el centro del mapa, que se proporciona como un LatLngAltitude, donde la altitud se expresa en metros sobre el nivel medio del mar. Ten en cuenta que no es necesariamente 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 se establece, el valor predeterminado es {lat: 0, lng: 0, altitude: 63170000}. 63,170,000 metros es la altitud máxima permitida (el radio de la Tierra multiplicado por 10). Atributo HTML: center="lat,lng,altitude"
defaultUIHidden attr: default-ui-hidden	Tipo de entrada: boolean optional Tipo de salida: boolean La configuración predeterminada es false. Cuando se establece en true, se ocultan todos los botones de la IU predeterminada. Atributo HTML: default-ui-hidden
description attr: description	Tipo de entrada: string optional Tipo de salida: string optional Si se proporciona, se agregará al mapa una descripción de accesibilidad (p.ej., para usar con lectores de pantalla) con el valor proporcionado. Atributo HTML: description="string"
fov attr: fov	Tipo de entrada: number optional Tipo de salida: number optional Especifica el campo visual vertical en grados. Los valores válidos van de 5.0 a 80.0. Los valores más altos aumentan el área visible, pero pueden generar distorsión de la perspectiva. Valor predeterminado: 35.0. Atributo HTML: fov="number"
gestureHandling attr: gesture-handling	Tipo de entrada: GestureHandling optional Tipo de salida: GestureHandling La configuración predeterminada es GestureHandling.GREEDY. Controla el manejo cooperativo de gestos. Cuando se establece en COOPERATIVE, se requieren teclas modificadoras o gestos con dos dedos para desplazarse por el mapa. Cuando se establece en GREEDY, no se puede desplazar la página host desde los eventos del usuario en el elemento del mapa. Cuando se establece en AUTO, el control de gestos se determina según la capacidad de desplazamiento de la página host. Atributo HTML: gesture-handling="value-name"
heading attr: heading	Tipo de entrada: number optional Tipo de salida: number optional Es la orientación de la brújula del mapa, en grados, donde el norte es cero. Cuando no hay inclinación, cualquier balanceo se interpretará como rumbo. Atributo HTML: heading="number"
internalUsageAttributionIds attr: internal-usage-attribution-ids	Tipo de entrada: Iterable<string> optional Tipo de salida: Array<string> optional Agrega un ID de atribución de uso al inicializador, lo que ayuda a Google a comprender qué bibliotecas y muestras son útiles para los desarrolladores, como el uso de una biblioteca de agrupamiento de marcadores en clústeres. Para inhabilitar el envío del ID de atribución de uso, puedes borrar esta propiedad de forma segura. Solo se enviarán valores únicos. Es posible que se ignoren los cambios que se realicen en este valor después de la creación de una instancia. Atributo HTML: internal-usage-attribution-ids="id1 id2"
language	Tipo de entrada: string optional Tipo de salida: string optional Es el idioma en el que se intentará renderizar el idioma del mapa base. Se usará de forma predeterminada el idioma que solicite el desarrollador cuando cargue la API de Maps JS.
mapId attr: map-id	Tipo de entrada: string optional Tipo de salida: string optional Especifica un ID de mapa que se usará para recuperar el diseño de mapa basado en Cloud para el mapa. Atributo HTML: map-id="string"
maxAltitude attr: max-altitude	Tipo de entrada: number optional Tipo de salida: number optional Es la altitud máxima sobre el suelo que se mostrará en el mapa. Un valor válido se encuentra entre 0 y 63170000 metros (el radio de la Tierra multiplicado por 10). Atributo HTML: max-altitude="number"
maxHeading attr: max-heading	Tipo de entrada: number optional Tipo de salida: 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 con la cabeza. 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 rumbo en [90, 180]. Atributo HTML: max-heading="number"
maxTilt attr: max-tilt	Tipo de entrada: number optional Tipo de salida: number optional Es el ángulo de incidencia máximo del mapa. Un valor válido está entre 0 y 90 grados. Atributo HTML: max-tilt="number"
minAltitude attr: min-altitude	Tipo de entrada: number optional Tipo de salida: number optional Es la altitud mínima sobre el suelo que se mostrará en el mapa. Un valor válido se encuentra entre 0 y 63170000 metros (el radio de la Tierra multiplicado por 10). Atributo HTML: min-altitude="number"
minHeading attr: min-heading	Tipo de entrada: number optional Tipo de salida: 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 con la cabeza. 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 rumbo en [90, 180]. Atributo HTML: min-heading="number"
minTilt attr: min-tilt	Tipo de entrada: number optional Tipo de salida: number optional Es el ángulo de incidencia mínimo del mapa. Un valor válido está entre 0 y 90 grados. Atributo HTML: min-tilt="number"
mode attr: mode	Tipo de entrada: MapMode optional Tipo de salida: MapMode optional Especifica el modo en el que se debe renderizar el mapa. Si no se establece, el mapa no se renderizará. Atributo HTML: mode="value-name"
range attr: range	Tipo de entrada: number optional Tipo de salida: number optional Es la distancia desde la cámara hasta el centro del mapa, en metros. Atributo HTML: range="number"
region	Tipo de entrada: string optional Tipo de salida: string optional Es la región con la que se intentará renderizar los lugares de interés del mapa base. Se usará de forma predeterminada la región que solicitó el desarrollador cuando cargó la API de Maps JS.
roll attr: roll	Tipo de entrada: number optional Tipo de salida: number optional Es el giro de la cámara alrededor del vector de vista en grados. Para resolver ambigüedades, cuando no haya inclinación, cualquier balanceo se interpretará como rumbo. Atributo HTML: roll="number"
tilt attr: tilt	Tipo de entrada: number optional Tipo de salida: number optional Es la inclinación del vector de vista de la cámara en grados. Un vector de vista que apunte directamente hacia la Tierra tendría una inclinación de cero grados. Un vector de vista que apunte en dirección opuesta a la Tierra tendría una inclinación de 180 grados. Atributo HTML: tilt="number"
defaultUIDisabled attr: default-ui-disabled	Obsoleto: Usa Map3DElement.defaultUIHidden en su lugar. Esta propiedad se quitará en una versión futura. Tipo: boolean optional La configuración predeterminada es false. Cuando se establece en true, se inhabilitan todos los botones de la IU predeterminada. No inhabilita los controles de teclado y gestos. Atributo HTML: default-ui-disabled

Métodos
flyCameraAround	flyCameraAround(options) Parámetros: options: FlyAroundAnimationOptions Valor de retorno: Ninguno Este método hace que la cámara gire alrededor de una ubicación determinada durante un tiempo específico. La animación se puede repetir la cantidad de veces que se indique en FlyAroundAnimationOptions.repeatCount. La cámara se moverá en el sentido de las manecillas del reloj. La ubicación alrededor de la cual se orbita se especifica a través de CameraOptions.center. Esta es la ubicación que se mostrará en el centro del viewport durante la animación de órbita, mientras la cámara se mueve alrededor de ella. 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 muestra una vez que se inicia la animación. Si la cantidad de veces que se repite FlyAroundAnimationOptions.repeatCount 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: options: FlyToAnimationOptions 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 específico. La ubicación final se puede especificar a través de CameraOptions.cameraPosition, que controla la posición exacta de la cámara, o a través de CameraOptions.center, que controla el centro del viewport visible del mapa. 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.
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 se queda donde está en medio 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 se haya cargado en una cantidad mínima. El método se devuelve una vez que se detiene la animación.
Heredado: addEventListener, removeEventListener

Eventos
gmp-animationend	function(animationEndEvent) Argumentos: animationEndEvent: Event optional Este evento se activa cuando finaliza la animación de vuelo. Este evento se propaga hacia arriba por el árbol del DOM.
gmp-camerapositionchange	function(cameraPositionChangeEvent) Argumentos: cameraPositionChangeEvent: Event optional Este evento se activa cuando cambia la propiedad cameraPosition de Map3DElement.
gmp-centerchange	function(centerChangeEvent) Argumentos: centerChangeEvent: Event optional Este evento se activa cuando cambia la propiedad center de Map3DElement.
gmp-click	function(clickEvent) Argumentos: clickEvent: LocationClickEvent|PlaceClickEvent optional Este evento se activa cuando se hace clic en el elemento Map3DElement.
gmp-error	function(mapInitializationErrorEvent) Argumentos: mapInitializationErrorEvent: Event optional Este evento se activa cuando no se puede inicializar el mapa.
gmp-fovchange	function(fovChangeEvent) Argumentos: fovChangeEvent: Event optional Este evento se activa cuando cambia la propiedad fov de Map3DElement.
gmp-headingchange	function(headingChangeEvent) Argumentos: headingChangeEvent: Event optional Este evento se activa cuando cambia la propiedad heading de Map3DElement.
gmp-map-id-error	function(mapIdErrorEvent) Argumentos: mapIdErrorEvent: Event optional Este evento se activa cuando la propiedad mapId del Map3DElement no es válida.
gmp-rangechange	function(rangeChangeEvent) Argumentos: rangeChangeEvent: Event optional Este evento se activa cuando cambia la propiedad range del Map3DElement.
gmp-rollchange	function(rollChangeEvent) Argumentos: rollChangeEvent: Event optional Este evento se activa cuando cambia la propiedad roll del Map3DElement.
gmp-steadychange	function(steadyChangeEvent) Argumentos: steadyChangeEvent: SteadyChangeEvent optional Este evento se activa cuando cambia el estado estable de Map3DElement.
gmp-tiltchange	function(tiltChangeEvent) Argumentos: tiltChangeEvent: Event optional Este evento se activa cuando cambia la propiedad tilt del Map3DElement.

Interfaz Map3DElementOptions

Interfaz google.maps.maps3d.Map3DElementOptions

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

Propiedades
autofitsCameraAnimation opcional	Aviso: Solo está disponible en el canal v=alpha. Tipo: AutofitsCameraAnimation optional Consulta los Map3DElement.autofitsCameraAnimation.
bounds opcional	Tipo: LatLngBounds|LatLngBoundsLiteral optional Consulta los Map3DElement.bounds.
cameraPosition opcional	Tipo: LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional Consulta los Map3DElement.cameraPosition.
center opcional	Tipo: LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional Consulta los Map3DElement.center.
defaultUIDisabled opcional	Obsoleto: Usa Map3DElement.defaultUIHidden en su lugar. Esta propiedad se quitará en una versión futura. Tipo: boolean optional Consulta los Map3DElement.defaultUIDisabled.
defaultUIHidden opcional	Tipo: boolean optional Consulta los Map3DElement.defaultUIHidden.
description opcional	Tipo: string optional Consulta los Map3DElement.description.
fov opcional	Tipo: number optional Consulta los Map3DElement.fov.
gestureHandling opcional	Tipo: GestureHandling optional Consulta los Map3DElement.gestureHandling.
heading opcional	Tipo: number optional Consulta los Map3DElement.heading.
internalUsageAttributionIds opcional	Tipo: Iterable<string> optional Consulta los Map3DElement.internalUsageAttributionIds.
language opcional	Tipo: string optional Consulta los Map3DElement.language.
mapId opcional	Tipo: string optional Consulta los Map3DElement.mapId.
maxAltitude opcional	Tipo: number optional Consulta los Map3DElement.maxAltitude.
maxHeading opcional	Tipo: number optional Consulta los Map3DElement.maxHeading.
maxTilt opcional	Tipo: number optional Consulta los Map3DElement.maxTilt.
minAltitude opcional	Tipo: number optional Consulta los Map3DElement.minAltitude.
minHeading opcional	Tipo: number optional Consulta los Map3DElement.minHeading.
minTilt opcional	Tipo: number optional Consulta los Map3DElement.minTilt.
mode opcional	Tipo: MapMode optional Consulta los Map3DElement.mode.
range opcional	Tipo: number optional Consulta los Map3DElement.range.
region opcional	Tipo: string optional Consulta los Map3DElement.region.
roll opcional	Tipo: number optional Consulta los Map3DElement.roll.
tilt opcional	Tipo: number optional Consulta los Map3DElement.tilt.

Constantes de MapMode

google.maps.maps3d.MapMode constantes biblioteca
"maps3d"

Especifica el modo en el que se debe renderizar el mapa.

Estas constantes también se pueden usar como cadenas. En TypeScript, los literales de cadena se definen con el tipo MapModeString.

const {MapMode} = await google.maps.importLibrary("maps3d");

Constantes
HYBRID	Este modo de mapa muestra una capa transparente de las calles principales sobre imágenes satelitales o fotorrealistas.
ROADMAP	Aviso: Solo está disponible en el canal v=alpha. Este modo muestra un mapa de ruta normal.
SATELLITE	Este modo de mapa muestra imágenes satelitales o fotorrealistas, según estén disponibles.

Constantes de GestureHandling

google.maps.maps3d.GestureHandling constantes biblioteca
"maps3d"

Especifica cómo se deben controlar los eventos de gestos en el elemento del mapa.

Estas constantes también se pueden usar como cadenas. En TypeScript, los literales de cadena se definen con el tipo GestureHandlingString.

const {GestureHandling} = await google.maps.importLibrary("maps3d");

Constantes
AUTO	Esto permite que el mapa elija si se debe usar el control de gestos cooperativo o codicioso. Este es el comportamiento predeterminado si no se especifica. Esto hará que el mapa ingrese al modo cooperativo si el mapa domina su elemento superior de desplazamiento (por lo general, la página de host) hasta el punto en que el usuario no puede desplazarse fuera del mapa hacia otro contenido.
COOPERATIVE	Esto fuerza el modo cooperativo, en el que se requieren teclas modificadoras o gestos con dos dedos para desplazarse por el mapa.
GREEDY	Esto fuerza el modo greedy, en el que no se puede desplazar la página host desde los eventos del usuario en el elemento del mapa.

Constantes de AutofitsCameraAnimation

google.maps.maps3d.AutofitsCameraAnimation constantes biblioteca
"maps3d"

Aviso: Solo está disponible en el canal v=alpha.

Especifica cómo debe comportarse la cámara cuando se mueve a una nueva posición para centrarse según sus elementos secundarios habilitados.

Estas constantes también se pueden usar como cadenas. En TypeScript, los literales de cadena se definen con el tipo AutofitsCameraAnimationString.

const {AutofitsCameraAnimation} = await google.maps.importLibrary("maps3d");

Constantes
FLY_TO	Vuela a la nueva posición.
NONE	Se ajusta a la nueva posición sin una animación.

Interfaz FlyAroundAnimationOptions

Interfaz google.maps.maps3d.FlyAroundAnimationOptions

Opciones de personalización para la animación FlyCameraAround

Propiedades
camera	Tipo: CameraOptions Es el punto central que debe mirar la cámara durante la animación de órbita. Ten en cuenta que la orientación del mapa cambiará a medida que la cámara orbite alrededor de este punto central.
durationMillis opcional	Tipo: number optional Es la duración de un ciclo de animación en milisegundos.
repeatCount opcional	Tipo: number optional Especifica la cantidad de veces que se debe repetir una animación. Si el número es cero, la animación se completará inmediatamente después de que comience. Si se pasa Number.Infinity, la animación se repetirá indefinidamente.
rounds opcional	Obsoleto: Usa FlyAroundAnimationOptions.repeatCount en su lugar. Tipo: number optional Es la cantidad de vueltas que se deben dar alrededor del centro en la duración determinada. Esto controla la velocidad general de la rotación. Si pasas un número negativo a rounds, la cámara rotará en el sentido contrario a las manecillas del reloj en lugar de en el sentido predeterminado.

Interfaz FlyToAnimationOptions

Interfaz google.maps.maps3d.FlyToAnimationOptions

Opciones de personalización para la animación FlyCameraTo.

Propiedades
endCamera	Tipo: CameraOptions Es la ubicación a la que debe apuntar la cámara al final de la animación.
durationMillis opcional	Tipo: number optional Es la duración de la animación en milisegundos. Una duración de 0 teletransportará la cámara directamente a la posición final.

Interfaz CameraOptions

Interfaz google.maps.maps3d.CameraOptions

Es el objeto CameraOptions que se usa para definir las propiedades que se pueden establecer en un objeto de cámara. El objeto de cámara puede ser cualquier elemento que tenga una posición de cámara, p.ej., un estado actual del mapa o un estado de animación solicitado para el futuro.

Propiedades
altitudeMode opcional	Tipo: AltitudeMode optional La configuración predeterminada es AltitudeMode.ABSOLUTE. Es una enumeración que especifica cómo interpretar el valor de altitud del objeto CameraOptions determinado. Esto reutiliza la enumeración AltitudeMode existente.
cameraPosition opcional	Tipo: LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional Consulta los Map3DElement.cameraPosition.
center opcional	Tipo: LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional Consulta los Map3DElement.center.
fov opcional	Tipo: number optional Consulta los Map3DElement.fov.
heading opcional	Tipo: number optional Consulta los Map3DElement.heading.
range opcional	Tipo: number optional Consulta los Map3DElement.range.
roll opcional	Tipo: number optional Consulta los Map3DElement.roll.
tilt opcional	Tipo: number optional Consulta los Map3DElement.tilt.

Clase SteadyChangeEvent

google.maps.maps3d.SteadyChangeEvent class
extends Event
library "maps3d"

Este evento se crea a partir de la supervisión de un estado estable de Map3DElement. Este evento se propaga hacia arriba por el árbol del DOM.

const {SteadyChangeEvent} = await google.maps.importLibrary("maps3d");

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

Clase LocationClickEvent

google.maps.maps3d.LocationClickEvent class
extends Event
library "maps3d"

Este evento se crea cuando se hace clic en un Map3DElement.

const {LocationClickEvent} = await google.maps.importLibrary("maps3d");

Propiedades

position

Tipo: LatLngAltitude optional La latitud, longitud y altitud que estaban debajo del cursor cuando se produjo el evento. Ten en cuenta que, en los niveles más generales, se devolverán datos menos precisos. Además, es posible que se devuelva la elevación del suelo marino para el valor de altitud cuando se haga clic en la superficie del agua desde posiciones de cámara más altas. Este evento se propaga hacia arriba por el árbol del DOM.

Clase PlaceClickEvent

google.maps.maps3d.PlaceClickEvent class
extends LocationClickEvent
library "maps3d"

Este evento se crea cuando se hace clic en el ícono de un lugar en un Map3DElement. Para evitar que aparezca el cuadro emergente predeterminado, llama al método preventDefault() en este evento para evitar que lo controle el Map3DElement.

const {PlaceClickEvent} = await google.maps.importLibrary("maps3d");

Propiedades
placeId	Tipo: string Es el ID de lugar del elemento del mapa.
Heredado: position

Métodos
fetchPlace	fetchPlace() Parámetros: Ninguno Valor de retorno: Promise<Place> Recupera un Place para este ID de lugar. En el objeto Place resultante, se completará la propiedad id. Posteriormente, se pueden solicitar campos adicionales a través de Place.fetchFields(), sujeto a la habilitación y facturación normales de la API de Places. La promesa se rechaza si se produjo un error al recuperar el Place.