Clase MarkerElement
google.maps.maps3d.MarkerElement
class
extends HTMLElement
implements MarkerElementOptions
library "maps3d"
Muestra una posición en un mapa en 3D. Ten en cuenta que se debe establecer el position para que se muestre el MarkerElement.
<gmp-marker altitude-mode="value-name" anchor-left="string" anchor-top="string" autofits-camera collision-behavior="value-name" collision-priority="number" position="lat,lng" title="string"> </gmp-marker>
const {MarkerElement} = await google.maps.importLibrary("maps3d");
Constructor | |
|---|---|
MarkerElement |
MarkerElement([options])Parámetros:
Crea un MarkerElement con las opciones especificadas. |
Propiedades | |
|---|---|
altitudeMode
attr: altitude-mode |
La configuración predeterminada es
AltitudeMode.CLAMP_TO_GROUND.Especifica cómo se interpreta el componente de altitud de la posición.
Atributo HTML: altitude-mode="value-name" |
anchorLeft
attr: anchor-left |
Tipo de entrada:
string optionalTipo de salida: stringPredeterminado: -50%
Es un valor de porcentaje de longitud de CSS que se usa para desplazar el punto de anclaje desde la esquina superior izquierda del marcador. Esto es útil cuando se usa un elemento visual que tiene un punto de anclaje diferente del punto central inferior típico del marcador predeterminado.
Atributo HTML: anchor-left="string" |
anchorTop
attr: anchor-top |
Tipo de entrada:
string optionalTipo de salida: stringPredeterminado: -100%
Es un valor de porcentaje de longitud de CSS que se usa para desplazar el punto de anclaje desde la esquina superior izquierda del marcador. Esto es útil cuando se usa un elemento visual que tiene un punto de anclaje diferente del punto central inferior típico del marcador predeterminado.
Atributo HTML: anchor-top="string" |
attr: autofits-camera |
Tipo:
boolean optionalLa configuración predeterminada es
false.Si se proporciona, el marcador especificado se hará visible en el viewport del mapa, junto con cualquier otro elemento que se haya habilitado.
Atributo HTML: autofits-camera |
collisionBehavior
attr: collision-behavior |
La configuración predeterminada es
CollisionBehavior.REQUIRED.Es una enumeración que especifica cómo debe comportarse un MarkerElement cuando colisiona con otro
MarkerElement, Marker3DElement o con las etiquetas del mapa base.Atributo HTML: collision-behavior="value-name" |
collisionPriority
attr: collision-priority |
Tipo de entrada:
number optionalTipo de salida: number optionalEs un número que se usa para ayudar a determinar la prioridad relativa entre los marcadores
CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY (incluido Marker3DElement). Un valor collisionPriority más alto indica una prioridad más alta.Atributo HTML: collision-priority="number" |
position
attr: position |
Tipo de entrada:
LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optionalTipo de salida: LatLngAltitude optionalEs la ubicación de la punta del marcador. La altitud se ignora en ciertos modos y, por lo tanto, es opcional.
Atributo HTML:
|
title
attr: title |
Tipo:
stringtexto de sustitución. Si se proporciona, se agregará un texto de accesibilidad (p.ej., para usar con lectores de pantalla) al
MarkerElement con el valor proporcionado.Atributo HTML: title="string" |
Ranuras | |
|---|---|
default |
Cualquier elemento personalizado que se agregue directamente al MarkerElement se asignará a un espacio. |
Propiedades de CSS | |
|---|---|
z-index |
Es el índice z de este marcador. Consulta la documentación de z-index para obtener más detalles. Los marcadores superpuestos con un índice z más alto cubren a aquellos con un índice más bajo. De forma predeterminada, los marcadores se muestran según su posición en el DOM, de modo que los marcadores que se agregan más tarde en el DOM aparecen delante de los que se agregaron antes. |
Métodos | |
|---|---|
Heredado:
addEventListener,
removeEventListener
|
Interfaz MarkerElementOptions
Interfaz
google.maps.maps3d.MarkerElementOptions
Es el objeto MarkerElementOptions que se usa para definir las propiedades que se pueden establecer en un MarkerElement.
Propiedades | |
|---|---|
altitudeMode
opcional |
Tipo:
AltitudeMode optionalConsulta los MarkerElement.altitudeMode. |
anchorLeft
opcional |
Tipo:
string optionalConsulta los MarkerElement.anchorLeft. |
anchorTop
opcional |
Tipo:
string optionalConsulta los MarkerElement.anchorTop. |
opcional |
Tipo:
boolean optionalConsulta los . |
collisionBehavior
opcional |
Tipo:
CollisionBehavior optionalConsulta los MarkerElement.collisionBehavior. |
collisionPriority
opcional |
Tipo:
number optionalConsulta los MarkerElement.collisionPriority. |
position
opcional |
Tipo:
LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optionalConsulta los MarkerElement.position. |
title
opcional |
Tipo:
string optionalConsulta los MarkerElement.title. |
Clase MarkerInteractiveElement
google.maps.maps3d.MarkerInteractiveElement
class
extends MarkerElement
implements MarkerInteractiveElementOptions
library "maps3d"
Muestra una posición en un mapa en 3D. Ten en cuenta que se debe establecer el position para que se muestre el MarkerInteractiveElement. A diferencia de MarkerElement, MarkerInteractiveElement recibe un evento gmp-click.
<gmp-marker-interactive gmp-popover-target-element="popover-id"> </gmp-marker-interactive>
const {MarkerInteractiveElement} = await google.maps.importLibrary("maps3d");
Constructor | |
|---|---|
MarkerInteractiveElement |
MarkerInteractiveElement([options])Parámetros:
Crea un MarkerInteractiveElement con las opciones especificadas. |
Propiedades | |
|---|---|
gmpPopoverTargetElement
attr: gmp-popover-target-element |
Cuando se establece, el elemento emergente se abrirá al hacer clic en este marcador.
Atributo HTML: gmp-popover-target-element="popover-id" |
Heredado:
altitudeMode (attr: altitude-mode),
anchorLeft (attr: anchor-left),
anchorTop (attr: anchor-top),
(attr: autofits-camera),
collisionBehavior (attr: collision-behavior),
collisionPriority (attr: collision-priority),
position (attr: position),
title (attr: title)
| |
Ranuras | |
|---|---|
Heredado:
default
|
Propiedades de CSS | |
|---|---|
Heredado:
z-index
|
Métodos | |
|---|---|
Heredado:
addEventListener,
removeEventListener
|
Eventos | |
|---|---|
gmp-click |
function(clickEvent)Argumentos:
Este evento se activa cuando se hace clic en el elemento MarkerInteractiveElement. |
Interfaz MarkerInteractiveElementOptions
google.maps.maps3d.MarkerInteractiveElementOptions
interface
extends MarkerElementOptions
Es el objeto MarkerInteractiveElementOptions que se usa para definir las propiedades que se pueden establecer en un MarkerInteractiveElement.
Propiedades | |
|---|---|
gmpPopoverTargetElement
opcional |
Tipo:
PopoverElement optionalConsulta los MarkerInteractiveElement.gmpPopoverTargetElement. |
Heredados:
altitudeMode,
anchorLeft,
anchorTop,
,
collisionBehavior,
collisionPriority,
position,
title
| |
Clase Marker3DElement
google.maps.maps3d.Marker3DElement
class
extends HTMLElement
implements Marker3DElementOptions
library "maps3d"
Muestra una posición en un mapa en 3D. Ten en cuenta que se debe establecer el position para que se muestre el Marker3DElement.
<gmp-marker-3d altitude-mode="value-name" autofits-camera collision-behavior="value-name" collision-priority="number" draws-when-occluded extruded label="string" position="lat,lng" size-preserved z-index="number"> </gmp-marker-3d>
const {Marker3DElement} = await google.maps.importLibrary("maps3d");
Constructor | |
|---|---|
Marker3DElement |
Marker3DElement([options])Parámetros:
Crea un Marker3DElement con las opciones especificadas. |
Propiedades | |
|---|---|
altitudeMode
attr: altitude-mode |
La configuración predeterminada es
AltitudeMode.CLAMP_TO_GROUND.Especifica cómo se interpreta el componente de altitud de la posición.
Atributo HTML: altitude-mode="value-name" |
attr: autofits-camera |
Tipo de entrada:
boolean optionalTipo de salida: booleanLa configuración predeterminada es
false.Si se proporciona, el marcador especificado se hará visible en el viewport del mapa, junto con cualquier otro elemento que se haya habilitado.
Atributo HTML: autofits-camera |
collisionBehavior
attr: collision-behavior |
La configuración predeterminada es
CollisionBehavior.REQUIRED.Es una enumeración que especifica cómo debe comportarse un Marker3DElement cuando colisiona con otro Marker3DElement o con las etiquetas del mapa base.
Atributo HTML: collision-behavior="value-name" |
collisionPriority
attr: collision-priority |
Tipo de entrada:
number optionalTipo de salida: number optionalEs la prioridad de colisión que se usa para la detección de colisiones.
Atributo HTML: collision-priority="number" |
drawsWhenOccluded
attr: draws-when-occluded |
Tipo de entrada:
boolean optionalTipo de salida: booleanLa configuración predeterminada es
false.Especifica si este marcador se debe dibujar o no cuando está oculto. La geometría del mapa (p.ej., edificios) puede ocultar el marcador.
Atributo HTML: draws-when-occluded |
extruded
attr: extruded |
Tipo de entrada:
boolean optionalTipo de salida: booleanLa configuración predeterminada es
false.Especifica si se debe conectar el marcador al suelo. Para extruir un marcador, el
altitudeMode debe ser RELATIVE_TO_GROUND o ABSOLUTE.Atributo HTML: extruded |
label
attr: label |
Tipo de entrada:
string optionalTipo de salida: string optionalEs el texto que mostrará este marcador.
Atributo HTML: label="string" |
position
attr: position |
Tipo de entrada:
LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optionalTipo de salida: LatLngAltitude optionalEs la ubicación de la punta del marcador. La altitud se ignora en ciertos modos y, por lo tanto, es opcional.
Atributo HTML:
|
sizePreserved
attr: size-preserved |
Tipo de entrada:
boolean optionalTipo de salida: booleanLa configuración predeterminada es
false.Especifica si este marcador debe conservar su tamaño o no, independientemente de la distancia de la cámara. De forma predeterminada, el marcador se escala según la distancia desde la cámara o la inclinación.
Atributo HTML: size-preserved |
zIndex
attr: z-index |
Tipo de entrada:
number optionalTipo de salida: number optionalEl zIndex en comparación con otros marcadores.
Atributo HTML: z-index="number" |
Ranuras | |
|---|---|
default |
Cualquier elemento personalizado que se agregue directamente a Marker3DElement se insertará en un espacio. Sin embargo, solo se usarán los elementos de los tipos HTMLImageElement, SVGElement y PinElement para dibujar marcadores, y se ignorarán los demás elementos. HTMLImageElement y SVGElement deben estar encerrados en el elemento <template> antes de asignarse al espacio predeterminado de Marker3DElement. Actualmente, las imágenes y los SVG se rasterizan antes de renderizarse en la escena en 3D, por lo que el HTML personalizado incorporado en las clases de SVG o CSS que se agreguen a las imágenes no se aplicará y es posible que no se refleje cuando se muestren los marcadores en la pantalla. |
Métodos | |
|---|---|
Heredado:
addEventListener,
removeEventListener
|
Interfaz Marker3DElementOptions
Interfaz
google.maps.maps3d.Marker3DElementOptions
Es el objeto Marker3DElementOptions que se usa para definir las propiedades que se pueden establecer en un Marker3DElement.
Propiedades | |
|---|---|
altitudeMode
opcional |
Tipo:
AltitudeMode optionalConsulta los Marker3DElement.altitudeMode. |
opcional |
Tipo:
boolean optionalConsulta los . |
collisionBehavior
opcional |
Tipo:
CollisionBehavior optionalConsulta los Marker3DElement.collisionBehavior. |
collisionPriority
opcional |
Tipo:
number optionalConsulta los Marker3DElement.collisionPriority. |
drawsWhenOccluded
opcional |
Tipo:
boolean optionalConsulta los Marker3DElement.drawsWhenOccluded. |
extruded
opcional |
Tipo:
boolean optionalConsulta los Marker3DElement.extruded. |
label
opcional |
Tipo:
string optionalConsulta los Marker3DElement.label. |
position
opcional |
Tipo:
LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optionalConsulta los Marker3DElement.position. |
sizePreserved
opcional |
Tipo:
boolean optionalConsulta los Marker3DElement.sizePreserved. |
zIndex
opcional |
Tipo:
number optionalConsulta los Marker3DElement.zIndex. |
Clase Marker3DInteractiveElement
google.maps.maps3d.Marker3DInteractiveElement
class
extends Marker3DElement
implements Marker3DInteractiveElementOptions
library "maps3d"
Muestra una posición en un mapa en 3D. Ten en cuenta que se debe establecer el position para que se muestre el Marker3DInteractiveElement. A diferencia de Marker3DElement, Marker3DInteractiveElement recibe un evento gmp-click.
<gmp-marker-3d-interactive gmp-popover-target-element="popover-id" title="string"> </gmp-marker-3d-interactive>
const {Marker3DInteractiveElement} = await google.maps.importLibrary("maps3d");
Constructor | |
|---|---|
Marker3DInteractiveElement |
Marker3DInteractiveElement([options])Parámetros:
Crea un Marker3DInteractiveElement con las opciones especificadas. |
Propiedades | |
|---|---|
gmpPopoverTargetElement
attr: gmp-popover-target-element |
Cuando se establece, el elemento emergente se abrirá al hacer clic en este marcador.
Atributo HTML: gmp-popover-target-element="popover-id" |
title
attr: title |
Tipo:
stringtexto de sustitución. Si se proporciona, se agregará un texto de accesibilidad (p.ej., para usar con lectores de pantalla) al
Marker3DInteractiveElement con el valor proporcionado.Atributo HTML: title="string" |
Heredados:
altitudeMode (attr: altitude-mode),
(attr: autofits-camera),
collisionBehavior (attr: collision-behavior),
collisionPriority (attr: collision-priority),
drawsWhenOccluded (attr: draws-when-occluded),
extruded (attr: extruded),
label (attr: label),
position (attr: position),
sizePreserved (attr: size-preserved),
zIndex (attr: z-index)
| |
Ranuras | |
|---|---|
default |
Cualquier elemento personalizado que se agregue directamente a Marker3DInteractiveElement se insertará en un espacio, pero solo se usarán los elementos del tipo PinElement para dibujar marcadores; se ignorarán los demás elementos. |
Métodos | |
|---|---|
Heredado:
addEventListener,
removeEventListener
|
Eventos | |
|---|---|
gmp-click |
function(clickEvent)Argumentos:
Este evento se activa cuando se hace clic en el elemento Marker3DInteractiveElement. |
Interfaz Marker3DInteractiveElementOptions
google.maps.maps3d.Marker3DInteractiveElementOptions
interface
extends Marker3DElementOptions
Es el objeto Marker3DInteractiveElementOptions que se usa para definir las propiedades que se pueden establecer en un Marker3DInteractiveElement.
Propiedades | |
|---|---|
gmpPopoverTargetElement
opcional |
Tipo:
PopoverElement optionalConsulta los Marker3DInteractiveElement.gmpPopoverTargetElement. |
title
opcional |
Tipo:
string optionalConsulta los Marker3DInteractiveElement.title. |
Heredados:
altitudeMode,
,
collisionBehavior,
collisionPriority,
drawsWhenOccluded,
extruded,
label,
position,
sizePreserved,
zIndex
| |
Clase Model3DElement
google.maps.maps3d.Model3DElement
class
extends HTMLElement
implements Model3DElementOptions
library "maps3d"
Un modelo 3D que permite renderizar modelos de gLTF Ten en cuenta que se deben configurar position y src para que se muestre Model3DElement.
Se deben admitir las propiedades principales de gLTF PBR. Por el momento, no se admiten extensiones ni propiedades de extensión.
<gmp-model-3d altitude-mode="value-name" orientation="heading,tilt,roll" position="lat,lng" scale="number" src="url"> </gmp-model-3d>
const {Model3DElement} = await google.maps.importLibrary("maps3d");
Constructor | |
|---|---|
Model3DElement |
Model3DElement([options])Parámetros:
Crea un Model3DElement con las opciones especificadas. |
Propiedades | |
|---|---|
altitudeMode
attr: altitude-mode |
La configuración predeterminada es
AltitudeMode.CLAMP_TO_GROUND.Especifica cómo se interpreta la altitud en la posición.
Atributo HTML: altitude-mode="value-name" |
orientation
attr: orientation |
Describe la rotación del sistema de coordenadas de un modelo 3D para posicionarlo en el mapa en 3D.
Las rotaciones se aplican al modelo en el siguiente orden: balanceo, inclinación y, luego, rumbo. Atributo HTML: orientation="heading,tilt,roll" |
position
attr: position |
Tipo de entrada:
LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optionalTipo de salida: LatLngAltitude optionalEstablece la posición del
Model3DElement. La altitud se ignora en ciertos modos y, por lo tanto, es opcional.Atributo HTML:
|
scale
attr: scale |
La configuración predeterminada es
1.Ajusta la escala del modelo a lo largo de los ejes x, y, y z en el espacio de coordenadas del modelo.
Atributo HTML:
|
src
attr: src |
Especifica la URL del modelo 3D. Por el momento, solo se admiten modelos en formato
.glb. Las URLs HTTP relativas se resolverán en sus correspondientes URLs absolutas. Ten en cuenta que, si alojas tus archivos de modelo de .glb en un sitio web o servidor diferente al de tu aplicación principal, debes configurar los encabezados HTTP de CORS correctos. Esto permite que tu aplicación acceda de forma segura a los archivos del modelo desde el otro dominio.Atributo HTML: src="url" |
Métodos | |
|---|---|
Heredado:
addEventListener,
removeEventListener
|
Interfaz Model3DElementOptions
Interfaz
google.maps.maps3d.Model3DElementOptions
Es el objeto Model3DElementOptions que se usa para definir las propiedades que se pueden establecer en un Model3DElement.
Propiedades | |
|---|---|
altitudeMode
opcional |
Tipo:
AltitudeMode optionalConsulta los Model3DElement.altitudeMode. |
orientation
opcional |
Tipo:
Orientation3D|Orientation3DLiteral optionalConsulta los Model3DElement.orientation. |
position
opcional |
Tipo:
LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optionalConsulta los Model3DElement.position. |
scale
opcional |
Tipo:
number|Vector3D|Vector3DLiteral optionalConsulta los Model3DElement.scale. |
src
opcional |
Tipo:
string|URL optionalConsulta los Model3DElement.src. |
Clase Model3DInteractiveElement
google.maps.maps3d.Model3DInteractiveElement
class
extends Model3DElement
implements Model3DInteractiveElementOptions
library "maps3d"
Un modelo 3D que permite renderizar modelos de gLTF Ten en cuenta que se deben configurar position y src para que se muestre Model3DElement.
Se deben admitir las propiedades principales de gLTF PBR. Por el momento, no se admiten extensiones ni propiedades de extensión.
A diferencia de Model3DElement, Model3DInteractiveElement recibe un evento gmp-click.
<gmp-model-3d-interactive></gmp-model-3d-interactive>
const {Model3DInteractiveElement} = await google.maps.importLibrary("maps3d");
Constructor | |
|---|---|
Model3DInteractiveElement |
Model3DInteractiveElement([options])Parámetros:
Crea un Model3DInteractiveElement con las opciones especificadas. |
Propiedades | |
|---|---|
Heredados:
altitudeMode (attr: altitude-mode),
orientation (attr: orientation),
position (attr: position),
scale (attr: scale),
src (attr: src)
|
Métodos | |
|---|---|
Heredado:
addEventListener,
removeEventListener
|
Eventos | |
|---|---|
gmp-click |
function(clickEvent)Argumentos:
Este evento se activa cuando se hace clic en el elemento Model3DInteractiveElement. |
Interfaz Model3DInteractiveElementOptions
google.maps.maps3d.Model3DInteractiveElementOptions
interface
extends Model3DElementOptions
Es el objeto Model3DInteractiveElementOptions que se usa para definir las propiedades que se pueden establecer en un Model3DInteractiveElement.
Propiedades | |
|---|---|
Heredados:
altitudeMode,
orientation,
position,
scale,
src
|
Clase Polyline3DElement
google.maps.maps3d.Polyline3DElement
class
extends HTMLElement
implements Polyline3DElementOptions
library "maps3d"
Una polilínea 3D es una superposición lineal de segmentos de líneas conectados en un mapa 3D.
<gmp-polyline-3d altitude-mode="value-name" autofits-camera draws-occluded-segments extruded geodesic outer-color="string" outer-width="number" path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..." stroke-color="string" stroke-width="number" z-index="number"> </gmp-polyline-3d>
const {Polyline3DElement} = await google.maps.importLibrary("maps3d");
Constructor | |
|---|---|
Polyline3DElement |
Polyline3DElement([options])Parámetros:
Crea un Polyline3DElement con las opciones especificadas. |
Propiedades | |
|---|---|
altitudeMode
attr: altitude-mode |
La configuración predeterminada es
AltitudeMode.CLAMP_TO_GROUND.Especifica cómo se interpretan los componentes de altitud en las coordenadas.
Atributo HTML: altitude-mode="value-name" |
attr: autofits-camera |
Tipo de entrada:
boolean optionalTipo de salida: booleanLa configuración predeterminada es
false.Si se proporciona, la polilínea especificada se hará visible dentro de la vista del mapa, junto con cualquier otro elemento que se haya habilitado.
Atributo HTML: autofits-camera |
drawsOccludedSegments
attr: draws-occluded-segments |
Tipo de entrada:
boolean optionalTipo de salida: booleanLa configuración predeterminada es
false.Especifica si se dibujan o no las partes de la polilínea que podrían estar ocultas. La geometría del mapa (p.ej., los edificios) puede ocultar las polilíneas.
Atributo HTML: draws-occluded-segments |
extruded
attr: extruded |
Tipo de entrada:
boolean optionalTipo de salida: booleanLa configuración predeterminada es
false.Especifica si se debe conectar la polilínea al suelo. Para extruir una polilínea, el
altitudeMode debe ser RELATIVE_TO_GROUND o ABSOLUTE.Atributo HTML: extruded |
geodesic
attr: geodesic |
Tipo de entrada:
boolean optionalTipo de salida: booleanLa configuración predeterminada es
false.Cuando es
true, los bordes de la polilínea se interpretan como geodésicos y seguirán la curvatura de la Tierra. Cuando es false, los bordes de la polilínea se renderizan como líneas rectas en el espacio de la pantalla.Atributo HTML: geodesic |
outerColor
attr: outer-color |
Tipo de entrada:
string optionalTipo de salida: string optionalEs el color exterior. Se admiten todos los colores CSS3.
Atributo HTML: outer-color="string" |
outerWidth
attr: outer-width |
Tipo de entrada:
number optionalTipo de salida: number optionalEl ancho exterior está entre
0.0 y 1.0. Este es un porcentaje de la strokeWidth.Atributo HTML: outer-width="number" |
path
attr: path |
Tipo de entrada:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optionalTipo de salida: Array<LatLngAltitude> optionalEs la secuencia ordenada de coordenadas de la polilínea. La altitud se ignora en ciertos modos y, por lo tanto, es opcional.
Atributo HTML: path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..." |
strokeColor
attr: stroke-color |
Tipo de entrada:
string optionalTipo de salida: string optionalcolor del trazo. Se admiten todos los colores CSS3.
Atributo HTML: stroke-color="string" |
strokeWidth
attr: stroke-width |
Tipo de entrada:
number optionalTipo de salida: number optionalancho de trazo en píxeles.
Atributo HTML: stroke-width="number" |
zIndex
attr: z-index |
Tipo de entrada:
number optionalTipo de salida: number optionalEs el zIndex en comparación con otros polígonos.
Atributo HTML: z-index="number" |
|
Tipo:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optionalEs la secuencia ordenada de coordenadas de la polilínea. La altitud se ignora en ciertos modos y, por lo tanto, es opcional. |
Métodos | |
|---|---|
Heredado:
addEventListener,
removeEventListener
|
Interfaz Polyline3DElementOptions
Interfaz
google.maps.maps3d.Polyline3DElementOptions
Es el objeto Polyline3DElementOptions que se usa para definir las propiedades que se pueden establecer en un Polyline3DElement.
Clase Polyline3DInteractiveElement
google.maps.maps3d.Polyline3DInteractiveElement
class
extends Polyline3DElement
implements Polyline3DInteractiveElementOptions
library "maps3d"
Una polilínea 3D es una superposición lineal de segmentos de líneas conectados en un mapa 3D. A diferencia de Polyline3DElement, Polyline3DInteractiveElement recibe un evento gmp-click.
<gmp-polyline-3d-interactive></gmp-polyline-3d-interactive>
const {Polyline3DInteractiveElement} = await google.maps.importLibrary("maps3d");
Constructor | |
|---|---|
Polyline3DInteractiveElement |
Polyline3DInteractiveElement([options])Parámetros:
Crea un Polyline3DInteractiveElement con las opciones especificadas. |
Propiedades | |
|---|---|
Heredados:
altitudeMode (attr: altitude-mode),
(attr: autofits-camera),
drawsOccludedSegments (attr: draws-occluded-segments),
extruded (attr: extruded),
geodesic (attr: geodesic),
outerColor (attr: outer-color),
outerWidth (attr: outer-width),
path (attr: path),
strokeColor (attr: stroke-color),
strokeWidth (attr: stroke-width),
zIndex (attr: z-index),
|
Métodos | |
|---|---|
Heredado:
addEventListener,
removeEventListener
|
Eventos | |
|---|---|
gmp-click |
function(clickEvent)Argumentos:
Este evento se activa cuando se hace clic en el elemento Polyline3DInteractiveElement. |
Interfaz Polyline3DInteractiveElementOptions
google.maps.maps3d.Polyline3DInteractiveElementOptions
interface
extends Polyline3DElementOptions
Es el objeto Polyline3DInteractiveElementOptions que se usa para definir las propiedades que se pueden establecer en un Polyline3DInteractiveElement.
Propiedades | |
|---|---|
Heredados:
altitudeMode,
,
coordinates,
drawsOccludedSegments,
extruded,
geodesic,
outerColor,
outerWidth,
path,
strokeColor,
strokeWidth,
zIndex
|
Clase Polygon3DElement
google.maps.maps3d.Polygon3DElement
class
extends HTMLElement
implements Polygon3DElementOptions
library "maps3d"
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 rellena.
<gmp-polygon-3d autofits-camera draws-occluded-segments extruded fill-color="string" geodesic path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..." stroke-color="string" stroke-width="number" z-index="number"> </gmp-polygon-3d>
const {Polygon3DElement} = await google.maps.importLibrary("maps3d");
Constructor | |
|---|---|
Polygon3DElement |
Polygon3DElement([options])Parámetros:
Crea un Polygon3DElement con las opciones especificadas. |
Propiedades | |
|---|---|
altitudeMode |
La configuración predeterminada es
AltitudeMode.CLAMP_TO_GROUND.Especifica cómo se interpretan los componentes de altitud en las coordenadas. |
attr: autofits-camera |
Tipo de entrada:
boolean optionalTipo de salida: booleanLa configuración predeterminada es
false.Si se proporciona, el polígono especificado se hará visible dentro del viewport del mapa, junto con cualquier otro elemento que se haya habilitado.
Atributo HTML: autofits-camera |
drawsOccludedSegments
attr: draws-occluded-segments |
Tipo de entrada:
boolean optionalTipo de salida: booleanLa configuración predeterminada es
false.Especifica si se dibujan o no las partes del polígono que podrían estar ocultas. La geometría del mapa (p.ej., edificios) puede ocultar los polígonos.
Atributo HTML: draws-occluded-segments |
extruded
attr: extruded |
Tipo de entrada:
boolean optionalTipo de salida: booleanLa configuración predeterminada es
false.Especifica si se debe conectar el polígono al suelo. Para extruir un polígono, el
altitudeMode debe ser RELATIVE_TO_GROUND o ABSOLUTE.Atributo HTML: extruded |
fillColor
attr: fill-color |
Tipo de entrada:
string optionalTipo de salida: string optionalcolor de relleno. Se admiten todos los colores CSS3.
Atributo HTML: fill-color="string" |
geodesic
attr: geodesic |
Tipo de entrada:
boolean optionalTipo de salida: booleanLa configuración predeterminada es
false.Cuando es
true, los bordes del polígono se interpretan como geodésicos y seguirán la curvatura de la Tierra. Cuando es false, los bordes del polígono se renderizan como líneas rectas en el espacio de la pantalla.Atributo HTML: geodesic |
innerPaths |
Tipo de entrada:
Iterable<Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral>> optionalTipo de salida: Array<Array<LatLngAltitude>> optionalEs la secuencia ordenada de coordenadas que designa un bucle cerrado. A diferencia de las polilíneas, un polígono puede constar de una o más rutas, que crean varios recortes dentro del polígono. |
path
attr: path |
Tipo de entrada:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optionalTipo de salida: Array<LatLngAltitude> optionalEs la secuencia ordenada de coordenadas que designa un bucle cerrado. La altitud se ignora en ciertos modos y, por lo tanto, es opcional.
Atributo HTML: path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..." |
strokeColor
attr: stroke-color |
Tipo de entrada:
string optionalTipo de salida: string optionalcolor del trazo. Se admiten todos los colores CSS3.
Atributo HTML: stroke-color="string" |
strokeWidth
attr: stroke-width |
Tipo de entrada:
number optionalTipo de salida: number optionalancho de trazo en píxeles.
Atributo HTML: stroke-width="number" |
zIndex
attr: z-index |
Tipo de entrada:
number optionalTipo de salida: number optionalEs el zIndex en comparación con otros polígonos.
Atributo HTML: z-index="number" |
|
Tipo:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optionalEs la secuencia ordenada de coordenadas que designa un bucle cerrado. La altitud se ignora en ciertos modos y, por lo tanto, es opcional. |
|
Tipo:
Iterable<Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral>> optionalEs la secuencia ordenada de coordenadas que designa un bucle cerrado. A diferencia de las polilíneas, un polígono puede constar de una o más rutas, que crean varios recortes dentro del polígono. |
Métodos | |
|---|---|
Heredado:
addEventListener,
removeEventListener
|
Interfaz Polygon3DElementOptions
Interfaz
google.maps.maps3d.Polygon3DElementOptions
Es el objeto Polygon3DElementOptions que se usa para definir las propiedades que se pueden establecer en un Polygon3DElement.
Clase Polygon3DInteractiveElement
google.maps.maps3d.Polygon3DInteractiveElement
class
extends Polygon3DElement
implements Polygon3DInteractiveElementOptions
library "maps3d"
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 rellena. A diferencia de Polygon3DElement, Polygon3DInteractiveElement recibe un evento gmp-click.
<gmp-polygon-3d-interactive></gmp-polygon-3d-interactive>
const {Polygon3DInteractiveElement} = await google.maps.importLibrary("maps3d");
Constructor | |
|---|---|
Polygon3DInteractiveElement |
Polygon3DInteractiveElement([options])Parámetros:
Crea un Polygon3DInteractiveElement con las opciones especificadas. |
Propiedades | |
|---|---|
Heredados:
altitudeMode,
(attr: autofits-camera),
drawsOccludedSegments (attr: draws-occluded-segments),
extruded (attr: extruded),
fillColor (attr: fill-color),
geodesic (attr: geodesic),
innerPaths,
path (attr: path),
strokeColor (attr: stroke-color),
strokeWidth (attr: stroke-width),
zIndex (attr: z-index),
,
|
Métodos | |
|---|---|
Heredado:
addEventListener,
removeEventListener
|
Eventos | |
|---|---|
gmp-click |
function(clickEvent)Argumentos:
Este evento se activa cuando se hace clic en el elemento Polygon3DInteractiveElement. |
Interfaz Polygon3DInteractiveElementOptions
google.maps.maps3d.Polygon3DInteractiveElementOptions
interface
extends Polygon3DElementOptions
Es el objeto Polygon3DInteractiveElementOptions que se usa para definir las propiedades que se pueden establecer en un Polygon3DInteractiveElement.
Propiedades | |
|---|---|
Heredados:
altitudeMode,
,
drawsOccludedSegments,
extruded,
fillColor,
geodesic,
innerCoordinates,
innerPaths,
outerCoordinates,
path,
strokeColor,
strokeWidth,
zIndex
|
Clase FlattenerElement
google.maps.maps3d.FlattenerElement
class
extends HTMLElement
implements FlattenerElementOptions
library "maps3d"
Se usa un elemento de aplanamiento para aplanar un área específica en el mapa.
<gmp-flattener path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."> </gmp-flattener>
const {FlattenerElement} = await google.maps.importLibrary("maps3d");
Constructor | |
|---|---|
FlattenerElement |
FlattenerElement([options])Parámetros:
|
Propiedades | |
|---|---|
innerPaths |
Tipo de entrada:
Iterable<Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral>> optionalTipo de salida: Array<Array<LatLngAltitude>> optionalEs la secuencia ordenada de coordenadas que designa un bucle cerrado. Estas rutas definen los agujeros de exclusión dentro de la ruta principal del polígono, que es la zona de aplanamiento. Las áreas dentro de un innerPath están exentas de la nivelación. |
path
attr: path |
Tipo de entrada:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optionalTipo de salida: Array<LatLngAltitude> optionalEs la secuencia ordenada de coordenadas que designa un bucle cerrado. Este bucle define la zona de aplanamiento.
Atributo HTML: path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..." |
Métodos | |
|---|---|
Heredado:
addEventListener,
removeEventListener
|
Interfaz FlattenerElementOptions
Interfaz
google.maps.maps3d.FlattenerElementOptions
Es el objeto FlattenerElementOptions que se usa para definir las propiedades que se pueden establecer en un FlattenerElement.
Propiedades | |
|---|---|
innerPaths
opcional |
Tipo:
Iterable<Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral>> optionalConsulta los FlattenerElement.innerPaths. |
path
opcional |
Tipo:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optionalConsulta los FlattenerElement.path. |
Clase PopoverElement
google.maps.maps3d.PopoverElement
class
extends HTMLElement
implements PopoverElementOptions
library "maps3d"
Es un elemento HTML personalizado que renderiza un cuadro emergente. Parece un cuadro de diálogo y, a menudo, está conectada a un marcador.
<gmp-popover auto-pan-disabled light-dismiss-disabled open position-anchor="lat,lng"> </gmp-popover>
const {PopoverElement} = await google.maps.importLibrary("maps3d");
Constructor | |
|---|---|
PopoverElement |
PopoverElement([options])Parámetros:
|
Propiedades | |
|---|---|
altitudeMode |
La configuración predeterminada es
AltitudeMode.CLAMP_TO_GROUND.Especifica cómo se interpreta el componente de altitud de la posición. |
autoPanDisabled
attr: auto-pan-disabled |
Tipo de entrada:
boolean optionalTipo de salida: booleanLa configuración predeterminada es
false.Si se establece como verdadero, se inhabilita el desplazamiento del mapa para que el cuadro emergente sea completamente visible cuando se abra.
Atributo HTML: auto-pan-disabled |
lightDismissDisabled
attr: light-dismiss-disabled |
Tipo de entrada:
boolean optionalTipo de salida: booleanLa configuración predeterminada es
false.Especifica si este cuadro emergente debe cerrarse con un clic fuera de él o no. El comportamiento de "descarte ligero" es similar a configurar el atributo
popover="auto", que forma parte de la API de Popover del navegador.Atributo HTML: light-dismiss-disabled |
open
attr: open |
Tipo de entrada:
boolean optionalTipo de salida: booleanLa configuración predeterminada es
false.Especifica si este cuadro emergente debe estar abierto o no.
Atributo HTML: open |
positionAnchor
attr: position-anchor |
Tipo de entrada:
LatLngLiteral|LatLngAltitudeLiteral|Marker3DInteractiveElement|MarkerInteractiveElement|string optionalTipo de salida: LatLngAltitude|Marker3DInteractiveElement|MarkerInteractiveElement optionalEs la posición en la que se mostrará este cuadro emergente. Si el cuadro emergente está fijado a un marcador interactivo, se usará la posición del marcador.
Atributo HTML:
|
Ranuras | |
|---|---|
default |
Coloca el contenido con ranuras en la sección principal del cuadro emergente. |
header |
Coloca el contenido con ranuras en la sección de encabezado del cuadro emergente. |
Propiedades de CSS | |
|---|---|
--gmp-popover-max-width |
Es el ancho máximo del cuadro emergente, independientemente del ancho del contenido. |
--gmp-popover-min-width |
Es el ancho mínimo del cuadro emergente, independientemente del ancho del contenido. Cuando uses esta propiedad, te recomendamos que la configures con un valor inferior al ancho del mapa (en píxeles). |
--gmp-popover-pixel-offset-x |
Es el desplazamiento en el eje X, en píxeles, de la punta de la ventana emergente desde el punto del mapa en cuyas coordenadas geográficas está anclada la ventana emergente. |
--gmp-popover-pixel-offset-y |
Es el desplazamiento en el eje Y, en píxeles, de la punta del cuadro emergente desde el punto del mapa en cuyas coordenadas geográficas está anclado el cuadro emergente. |
background-color |
Es el color de fondo del cuadro emergente. Consulta la documentación de background-color para obtener más detalles. Ten en cuenta que la ventana emergente predeterminada del lugar también se ve afectada por esta propiedad. Usa clases de CSS específicas o estilos intercalados en los popovers personalizados para evitar que se aplique el estilo del popover de lugar predeterminado. |
border-radius |
Es el radio del borde de la ventana emergente. Consulta la documentación de border-radius para obtener más detalles. Ten en cuenta que la ventana emergente predeterminada del lugar también se ve afectada por esta propiedad. Usa clases de CSS específicas o estilos intercalados en los popovers personalizados para evitar que se aplique el estilo del popover de lugar predeterminado. |
box-shadow |
La sombra difuminada del cuadro emergente. Consulta la documentación de box-shadow para obtener más detalles. Ten en cuenta que la ventana emergente predeterminada del lugar también se ve afectada por esta propiedad. Usa clases de CSS específicas o estilos intercalados en los popovers personalizados para evitar que se aplique el estilo del popover de lugar predeterminado. |
color-scheme |
Indica en qué esquema de colores se puede renderizar este cuadro emergente. Consulta la documentación de color-scheme para obtener más detalles. Si no se especifica, se usa de forma predeterminada el esquema de colores que prefiere el usuario. |
padding |
Es el padding del cuadro emergente. Consulta la documentación de padding para obtener más detalles. Ten en cuenta que la ventana emergente predeterminada del lugar también se ve afectada por esta propiedad. Usa clases de CSS específicas o estilos intercalados en los popovers personalizados para evitar que se aplique el estilo del popover de lugar predeterminado. |
Métodos | |
|---|---|
Heredado:
addEventListener,
removeEventListener
|
Interfaz PopoverElementOptions
Interfaz
google.maps.maps3d.PopoverElementOptions
Objeto PopoverElementOptions que se usa para definir las propiedades que se pueden establecer en un PopoverElement.
Propiedades | |
|---|---|
altitudeMode
opcional |
Tipo:
AltitudeMode optionalConsulta los PopoverElement.altitudeMode. |
autoPanDisabled
opcional |
Tipo:
boolean optionalConsulta los PopoverElement.autoPanDisabled. |
lightDismissDisabled
opcional |
Tipo:
boolean optionalConsulta los PopoverElement.lightDismissDisabled. |
open
opcional |
Tipo:
boolean optionalConsulta los PopoverElement.open. |
positionAnchor
opcional |
Tipo:
LatLngLiteral|LatLngAltitudeLiteral|string|Marker3DInteractiveElement|MarkerInteractiveElement optionalConsulta los PopoverElement.positionAnchor. |
Constantes de AltitudeMode
google.maps.maps3d.AltitudeMode
constantes
biblioteca
"maps3d"
Especifica cómo se interpretan los componentes de altitud en las coordenadas.
Estas constantes también se pueden usar como cadenas. En TypeScript, los literales de cadena se definen con el tipo AltitudeModeString.
const {AltitudeMode} = await google.maps.importLibrary("maps3d");
Constantes | |
|---|---|
ABSOLUTE |
Permite expresar objetos en relación con el nivel medio del mar. Esto también significa que, si cambia el nivel de detalle del terreno debajo del objeto, su posición absoluta seguirá siendo la misma. |
CLAMP_TO_GROUND |
Permite expresar objetos colocados 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 un cuerpo de agua importante, se ubicará al nivel del mar. |
RELATIVE_TO_GROUND |
Permite expresar objetos en relación con la superficie del suelo. Si cambia el nivel de detalle del terreno, la posición del objeto permanecerá constante con respecto al suelo. Cuando se encuentre sobre el agua, la altitud se interpretará como un valor en metros sobre el nivel del mar. |
RELATIVE_TO_MESH |
Permite expresar objetos en relación con el punto más alto del suelo, el edificio o la superficie del agua. Cuando se encuentre sobre el agua, será la superficie del agua; cuando se encuentre sobre el terreno, será la superficie del edificio (si hay alguno) o la superficie del suelo (si no hay edificios). |
Clase CirclePathElement
google.maps.maps3d.CirclePathElement
class
extends HTMLElement
implements CirclePathElementOptions
library "maps3d"
Una superposición de círculo en 3D en un mapa en 3D.
<gmp-circle-path center="lat,lng,altitude" radius="number"> </gmp-circle-path>
const {CirclePathElement} = await google.maps.importLibrary("maps3d");
Constructor | |
|---|---|
CirclePathElement |
CirclePathElement([options])Parámetros:
Crea un CirclePathElement con las opciones especificadas. |
Propiedades | |
|---|---|
center
attr: center |
Tipo de entrada:
LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optionalTipo de salida: LatLngAltitude optionalEl centro del círculo.
Atributo HTML: center="lat,lng,altitude" |
radius
attr: radius |
Tipo de entrada:
number optionalTipo de salida: number optionalEs el radio del círculo en metros.
Atributo HTML: radius="number" |
Métodos | |
|---|---|
Heredado:
addEventListener,
removeEventListener
|
Interfaz CirclePathElementOptions
Interfaz
google.maps.maps3d.CirclePathElementOptions
Es el objeto CirclePathElementOptions que se usa para definir las propiedades que se pueden establecer en un CirclePathElement.
Propiedades | |
|---|---|
center
opcional |
Tipo:
LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optionalConsulta los CirclePathElement.center. |
radius
opcional |
Tipo:
number optionalConsulta los CirclePathElement.radius. |