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

Wybierz platformę: Android iOS JavaScript

Na tej stronie opisujemy, jak kontrolować następujące aspekty znaczników zaawansowanych:

  • Ustawianie zachowania znacznika podczas kolizji
  • Ustaw wysokość znacznika
  • Kontrolowanie widoczności znaczników według poziomu powiększenia mapy

Ustawianie zachowania znacznika podczas kolizji

Zachowanie w przypadku kolizji określa sposób wyświetlania znacznika w przypadku zderzenia (nakładającego się) z innym znacznikiem. Zachowanie w przypadku kolizji jest obsługiwane tylko na mapach wektorowych.

Aby ustawić działanie związane z kolizją, ustaw AdvancedMarkerElement.collisionBehavior na jedną z tych wartości:

  • REQUIRED: (wartość domyślna) zawsze wyświetla znacznik bez względu na kolizję.
  • OPTIONAL_AND_HIDES_LOWER_PRIORITY Wyświetlaj znacznik tylko wtedy, gdy nie pokrywa się on z innymi znacznikami. Jeśli 2 znaczniki tego typu będą się nakładać, wyświetli się ten z większą wartością parametru zIndex. Jeśli zIndex są takie same, wyświetli się ta, która znajduje się niżej na ekranie.
  • REQUIRED_AND_HIDES_OPTIONAL Zawsze wyświetlaj znacznik bez względu na kolizję i ukryj wszystkie znaczniki OPTIONAL_AND_HIDES_LOWER_PRIORITY i etykiety, które mogą się z nim pokrywać.

Poniższy przykład przedstawia zachowanie znacznika przy kolizji ustawień:

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 pojawia się znacznik. Jest to przydatne do poprawnego wyświetlania znaczników względem 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

Kontrolowanie widoczności znaczników według poziomu powiększenia mapy

Zobacz zmianę widoczności znaczników (zaczynaj od pomniejszenia):

Aby kontrolować widoczność znacznika zaawansowanego, utwórz nasłuchujący element zoom_changed i dodaj funkcję warunkową, która ustawia AdvancedMarkerElement.map na null, jeśli powiększenie 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

Zadbaj o to, aby znaczniki były klikalne i dostępne