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:

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

Ustaw zachowanie znacznika w przypadku kolizji

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: (ustawienie domyślne) znacznik zawsze jest wyświetlany niezależnie od kolizji.
  • OPTIONAL_AND_HIDES_LOWER_PRIORITY Wyświetlaj znacznik tylko wtedy, gdy nie nakłada się on na inne znaczniki. Jeśli 2 znaczniki tego typu będą się nakładać, wyświetlany jest ten o 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świetlaj znacznik niezależnie od kolizji i ukrywaj wszystkie znaczniki OPTIONAL_AND_HIDES_LOWER_PRIORITY oraz etykiety, które mogłyby się z nim pokrywać.

Poniższy przykład pokazuje ustawianie sposobu kolizji dla 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

Ustaw wysokość znacznika

Na mapach wektorowych możesz ustawić wysokość, na której ma się pojawiać znacznik. Jest to przydatne, gdy znaczniki są prawidłowo wyświetlane na podstawie zawartoś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

Sprawdź zmianę widoczności znaczników (rozpocznij od pomniejszenia):

Aby sterować widocznością znacznika zaawansowanego, utwórz detektor zoom_changed i dodaj funkcję warunkową, aby ustawić AdvancedMarkerElement.map na null, jeśli powiększenie przekracza określony poziom, jak pokazano w poniższym 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

Oznaczanie znaczników jako klikalnych i dostępnych