Kontrolowanie zachowania w wyniku kolizji oraz wysokości i widoczności

Wybierz platformę: Android iOS JavaScript

Na tej stronie dowiesz się, jak kontrolować te aspekty znaczników zaawansowanych:

  • Ustawianie zachowania w przypadku kolizji znacznika
  • Ustawianie wysokości znacznika
  • Sterowanie widocznością znacznika na podstawie poziomu powiększenia mapy

Ustawianie zachowania w przypadku kolizji znacznika

Zachowanie w przypadku kolizji określa sposób wyświetlania znacznika, gdy koliduje (nakłada się) z innym znacznikiem. Zachowanie w przypadku kolizji jest obsługiwane tylko na mapach wektorowych.

Aby określić zachowanie w przypadku kolizji, ustaw wartość AdvancedMarkerElement.collisionBehavior na jeden z tych parametrów:

  • REQUIRED: (wartość domyślna) zawsze wyświetlaj znacznik niezależnie od kolizji.
  • OPTIONAL_AND_HIDES_LOWER_PRIORITY Wyświetlaj znacznik tylko wtedy, gdy nie zachodzi na inne znaczniki. Jeśli 2 takie znaczniki nakładają się na siebie, wyświetla się ten z wyższym zIndex. Jeśli mają ten sam atrybuty zIndex, wyświetlana jest pozycja z niższym pionowym położeniem ekranu.
  • REQUIRED_AND_HIDES_OPTIONAL zawsze wyświetlać znacznik bez względu na kolizje i ukrywać dowolne znaczniki lub etykiety OPTIONAL_AND_HIDES_LOWER_PRIORITY, które nakładają się na znacznik.

Przykład poniżej pokazuje ustawienie zachowania w przypadku kolizji znacznika:

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

Ustawianie wysokości znacznika

Na mapach wektorowych możesz ustawić wysokość, na której ma się pojawiać znacznik. Jest to przydatne, aby wskaźniki wyświetlały się prawidłowo w związku z treścią mapy 3D. Aby ustawić wysokość znacznika, jako wartość opcji MarkerView.position podaj LatLngAltitude:

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

Sterowanie widocznością znacznika na podstawie poziomu powiększenia mapy

Obserwuj, jak zmienia się widoczność znaczników (zacznij od oddalenia):

Aby kontrolować widoczność znacznika zaawansowanego, utwórz listenera zoom_changed i dodaj funkcję warunkową, która ustawia AdvancedMarkerElement.map na null, jeśli poziom powiększenia przekracza określony poziom, jak w tym przykładzie:

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

Dalsze kroki

Ustawianie znaczników w taki sposób, aby można je było kliknąć i aby były dostępne