Cómo controlar el comportamiento de colisión, la altitud y la visibilidad

Selecciona la plataforma: Android iOS JavaScript

En esta página, te indicamos cómo controlar los siguientes aspectos de Marcadores avanzados:

  • Cómo configurar el comportamiento de colisión de un marcador
  • Cómo configurar la altitud de un marcador
  • Cómo controlar la visibilidad de un marcador según el nivel de zoom del mapa

Cómo configurar 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. Esta conducta solo se admite en los mapas de vectores.

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

  • REQUIRED: (opción predeterminada) Indica que el marcador debe mostrarse siempre, independientemente de las superposiciones.
  • 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.
  • 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.

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

TypeScript

const advancedMarker = new AdvancedMarkerElement({
  position: new google.maps.LatLng({ lat, lng }),
  map,
  collisionBehavior: collisionBehavior,
});
index.ts

JavaScript

const advancedMarker = new AdvancedMarkerElement({
    position: new google.maps.LatLng({ lat, lng }),
    map,
    collisionBehavior: collisionBehavior,
});
index.js

Cómo configurar la altitud de un marcador

En los mapas de vectores, puedes configurar la altitud en la que aparece un marcador. Esto ayuda a que los marcadores aparezcan correctamente en relación con el contenido del mapa 3D. Para establecer la altitud de un marcador, especifica un valor de LatLngAltitude para la opción MarkerView.position:

TypeScript

const pin = new PinElement({
    background: '#4b2e83',
    borderColor: '#b7a57a',
    glyphColor: '#b7a57a',
    scale: 2.0,
});

const markerView = new AdvancedMarkerElement({
    map,
    content: pin.element,
    // Set altitude to 20 meters above the ground.
    position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 } as google.maps.LatLngAltitudeLiteral,
});
index.ts

JavaScript

const pin = new PinElement({
    background: '#4b2e83',
    borderColor: '#b7a57a',
    glyphColor: '#b7a57a',
    scale: 2.0,
});
const markerView = new AdvancedMarkerElement({
    map,
    content: pin.element,
    // Set altitude to 20 meters above the ground.
    position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 },
});
index.js

Cómo controlar la visibilidad de un marcador según el nivel de zoom del mapa

Observa el cambio en la visibilidad de los marcadores (aléjate del mapa):

Para controlar la visibilidad de un Marcador avanzado, crea un objeto de escucha zoom_changed y agrega una función condicional para establecer AdvancedMarkerElement.map en null si el zoom supera el nivel especificado, como se muestra en el siguiente ejemplo:

TypeScript

map.addListener('zoom_changed', () => {
    const zoom = map.getZoom();
    if (zoom) {
        // Only show each marker above a certain zoom level.
        marker01.map = zoom > 14 ? map : null;
        marker02.map = zoom > 15 ? map : null;
        marker03.map = zoom > 16 ? map : null;
        marker04.map = zoom > 17 ? map : null;
    }
});
index.ts

JavaScript

map.addListener('zoom_changed', () => {
    const zoom = map.getZoom();
    if (zoom) {
        // Only show each marker above a certain zoom level.
        marker01.map = zoom > 14 ? map : null;
        marker02.map = zoom > 15 ? map : null;
        marker03.map = zoom > 16 ? map : null;
        marker04.map = zoom > 17 ? map : null;
    }
});
index.js

Próximos pasos

Cómo configurar los marcadores para que sean accesibles y admitan la posibilidad de hacer clics