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

Wybierz platformę: Android iOS JavaScript

Ta strona przedstawia sposób kontrolowania następujących aspektów znaczników zaawansowanych:

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

Ustaw zachowanie znacznika w przypadku kolizji

Zachowanie podczas kolizji określa sposób wyświetlania znacznika w przypadku, gdy zderza on (nachodzi) z innym znacznikiem. Zachowanie przy kolizjach jest obsługiwane tylko na mapach wektorowych.

Aby ustawić zachowanie przy kolizji, ustaw AdvancedMarkerElement.collisionBehavior na jedną z tych opcji:

  • 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ę na inne znaczniki. Jeśli 2 znaczniki tego typu będą się nakładać, wyświetlany jest ten o wyższej wartości zIndex. Jeśli zIndex mają tę samą wartość, wyświetli się ten, który wyświetla się u dołu ekranu w pionie.
  • 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żna ustawić wysokość, na której wyświetlany jest znacznik. Jest to przydatne, gdy znaczniki są poprawnie wyświetlane na podstawie zawartości mapy 3D. Aby ustawić wysokość znacznika, podaj LatLngAltitude jako wartość opcji 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

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