Kontrolowanie zachowania przy kolizji

Wybierz platformę: Android iOS JavaScript

Na tej stronie pokazujemy, jak ustawić zachowanie przy kolizji znaczników. Zachowanie znaczników przy kolizji określa, jak znacznik będzie wyświetlany, jeśli będzie się nakładać na inny znacznik.

Aby ustawić zachowanie przy kolizji znaczników, ustaw w atrybucie collisionBehavior jedną z tych wartości:

  • REQUIRED (wymagane): zawsze wyświetlaj znacznik niezależnie od kolizji.
  • REQUIRED_AND_HIDES_OPTIONAL(wymagane i ukrywa opcjonalne): zawsze wyświetlaj znacznik niezależnie od kolizji i ukrywaj wszystkie znaczniki lub etykiety OPTIONAL_AND_HIDES_LOWER_PRIORITY, które mogłyby się z nim pokrywać.
  • OPTIONAL_AND_HIDES_LOWER_PRIORITY(opcjonalne i ukrywa o niższym priorytecie): 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.

Poniższy przykład pokazuje, jak ustawić zachowanie przy kolizji znaczników:

const marker = new Marker3DElement({
    position: { lat, lng },
    // Try setting a different collision behavior here.
    collisionBehavior: 'REQUIRED',
});

Kontrolowanie zachowania etykiety przy kolizji

Możesz oddzielnie kontrolować zachowanie znacznika przy kolizji i tekst etykiety. W niektórych przypadkach może być korzystne ukrywanie etykiet przy jednoczesnym pozostawieniu widocznych na ekranie znaczników, aby zachować kontekst. Aby to zrobić, dodaj element <gmp-label-3d> jako element równorzędny elementu <gmp-marker-3d> i połącz je za pomocą atrybutu for.

Poniższy przykładowy kod pokazuje, jak ustawić zachowanie etykiety przy kolizji niezależnie od znacznika:

const markerWithIndependentLabel = new Marker3DElement({
    position: { lat: 37.423, lng: -122.015 },
});
markerWithIndependentLabel.id = 'marker-1';
const label = new Label3DElement({
    collisionBehavior: CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY,
    for: 'marker-1',
});
label.append('Independent label example');
map.append(markerWithIndependentLabel);
map.append(label);