Controlar o comportamento em caso de conflito

Esta página demonstra como definir o comportamento em caso de conflito de um marcador. O comportamento em caso de conflito controla como um marcador vai aparecer se houver sobreposição com outro marcador.

Para escolher o comportamento em caso de conflito, defina collisionBehavior como uma das seguintes opções:

• REQUIRED: sempre mostrar o marcador, independentemente do conflito.
• REQUIRED_AND_HIDES_OPTIONAL: sempre mostrar o marcador, independentemente do conflito, e ocultar todos os marcadores ou rótulos OPTIONAL_AND_HIDES_LOWER_PRIORITY que se sobrepuserem a ele.
• OPTIONAL_AND_HIDES_LOWER_PRIORITY: só mostrar o marcador se ele não se sobrepuser a outros elementos. Em caso de conflito, o marcador com o maior zIndex vai aparecer. Se eles tiverem o mesmo zIndex, aquele com a posição vertical mais abaixo na tela será mostrado.

Confira no exemplo a seguir como configurar o comportamento em caso de conflito de um marcador:

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

Controlar o comportamento em caso de conflito de um rótulo

É possível controlar o comportamento em caso de conflito do pino e do texto do rótulo de um marcador separadamente. Em alguns casos, pode ser útil ocultar rótulos, mas deixar os pinos de marcador visíveis na tela para preservar o contexto. Para fazer isso, adicione um elemento <gmp-label-3d> como um elemento irmão de <gmp-marker-3d> e vincule os usando o atributo for.

O exemplo de código a seguir demonstra a definição do comportamento em caso de conflito de um rótulo separadamente de um 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