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 znaczników przy kolizji
  • Ustawianie wysokości znacznika
  • Sterowanie widocznością znacznika na podstawie poziomu powiększenia mapy

Ustawianie zachowania znaczników przy kolizji

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

Aby ustawić zachowanie przy 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 znaczniki 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 znacznik, który znajduje się niżej na ekranie.
  • REQUIRED_AND_HIDES_OPTIONAL Zawsze wyświetlaj znacznik niezależnie od kolizji i ukrywaj wszystkie znaczniki OPTIONAL_AND_HIDES_LOWER_PRIORITY lub etykiety, które mogłyby się z nim pokrywać.

W przykładzie poniżej pokazujemy, jak ustawić zachowanie znacznika przy kolizji:

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, określ wartość LatLngAltitude dla 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

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

Jeśli chcesz kontrolować widoczność znacznika zaawansowanego, utwórz detektor zoom_changed i dodaj funkcję warunkową, aby ustawić AdvancedMarkerElement.map na null, jeśli poziom powiększenia przekroczy określony poziom. Możesz to zobaczyć 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