Control del comportamiento de colisión

En esta página, se muestra cómo establecer el comportamiento de colisión de un marcador. El comportamiento de colisión controla cómo se mostrará un marcador si se superpone con otro.

Para configurar el comportamiento de colisión, establece collisionBehavior en una de las siguientes opciones:

• REQUIRED: Indica que el marcador debe mostrarse siempre, independientemente de las superposiciones.
• REQUIRED_AND_HIDES_OPTIONAL: Indica que el marcador debe mostrarse siempre, independientemente de las superposiciones, y que se deben ocultar las etiquetas o los marcadores OPTIONAL_AND_HIDES_LOWER_PRIORITY que se superpongan con este.
• OPTIONAL_AND_HIDES_LOWER_PRIORITY: Indica que el marcador solo debe mostrarse si no se superpone con otros. Si dos marcadores de este tipo se superponen, se mostrará el que tenga el valor de zIndex más alto. Si tienen el mismo valor de zIndex, se mostrará el que tenga la posición vertical más baja en la pantalla.

En el siguiente ejemplo, se muestra la configuración del comportamiento de colisión de un marcador:

const marker = new Marker3DElement({
    position: { lat, lng },
    // Try setting a different collision behavior here.
    collisionBehavior: 'REQUIRED',
});
index.js

Controla el comportamiento de colisión de una etiqueta

Puedes controlar el comportamiento de colisión del pin y el texto de la etiqueta de un marcador por separado. En algunos casos, puede ser beneficioso ocultar las etiquetas y dejar los pines de los marcadores visibles en la pantalla para preservar el contexto. Para ello, agrega un elemento <gmp-label-3d> como elemento del mismo nivel de <gmp-marker-3d> y vincúlalos con el atributo for.

En el siguiente ejemplo de código, se muestra la configuración del comportamiento de colisión de una etiqueta por separado de un marcador:

const markerWithIndependentLabel = new Marker3DElement({
    position: { lat: 37.423, lng: -122.015 },
});
markerWithIndependentLabel.id = 'marker-1';
const label = new Label3DElement({
    collisionBehavior: CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY,
    for: 'marker-1',
});
label.append('Independent label example');
map.append(markerWithIndependentLabel);
map.append(label);
index.js