kontrolować zachowanie podczas kolizji, wysokość i widoczność;

Wybierz platformę: Android iOS JavaScript

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

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

Ustawianie zachowania znacznika w przypadku kolizji

Zachowanie w przypadku kolizji określa, jak znacznik będzie wyświetlany, jeśli będzie się nakładać na inny znacznik. Zachowanie kolizji jest obsługiwane tylko na mapach wektorowych.

Aby ustawić zachowanie w przypadku kolizji, ustaw w atrybucie AdvancedMarkerElement.collisionBehavior jedną z tych wartości:

  • REQUIRED: (domyślnie) zawsze wyświetlaj znacznik 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 markery tego typu nakładają się na siebie, wyświetlany jest ten z wyższą wartością zIndex. Jeśli mają ten sam atrybut zIndex, wyświetlany jest ten, który znajduje się niżej na ekranie.
  • REQUIRED_AND_HIDES_OPTIONAL Zawsze wyświetlaj znacznik niezależnie od kolizji i ukrywaj wszystkie znaczniki lub etykiety, które mogłyby się z nim pokrywać.OPTIONAL_AND_HIDES_LOWER_PRIORITY

W przykładzie poniżej pokazano ustawianie zachowania w przypadku kolizji w przypadku markera:

TypeScript

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

JavaScript

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

Ustawianie wysokości znacznika

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

TypeScript

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

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

mapElement.append(marker);
index.ts

JavaScript

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

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

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

Aby kontrolować widoczność zaawansowanego markera, utwórz zoom_changedsłuchacza i dodaj funkcję warunkową, aby ustawić AdvancedMarkerElement.map na null, jeśli poziom powiększenia przekroczy określony poziom, jak pokazano w tym przykładzie:

TypeScript

mapElement.innerMap.addListener('zoom_changed', () => {
  let zoom = mapElement.innerMap.getZoom();
  for (let i = 0; i < markers.length; i++) {
    const { position, minZoom } = markerOptions[i];
    markers[i].position = zoom! > minZoom ? position : null;
  }
});
index.ts

JavaScript

mapElement.innerMap.addListener('zoom_changed', () => {
    let zoom = mapElement.innerMap.getZoom();
    for (let i = 0; i < markers.length; i++) {
        const { position, minZoom } = markerOptions[i];
        markers[i].position = zoom > minZoom ? position : null;
    }
});
index.js

Dalsze kroki

Umożliwianie klikania i dostępność znaczników