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 los marcadores OPTIONAL_AND_HIDES_LOWER_PRIORITY que se superpongan con él.
• 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

Cómo controlar el comportamiento de colisión de una etiqueta

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

En el siguiente ejemplo de código, se muestra cómo configurar el 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