Как настроить поведение при наложении, высоту и видимость

Выберите платформу: Android iOS JavaScript

На этой странице показано, как управлять следующими аспектами Advanced Markers:

  • Установить поведение при столкновении для маркера
  • Установить высоту маркера
  • Управление видимостью маркера с помощью уровня масштабирования карты

Установить поведение при столкновении для маркера

Поведение при столкновении управляет отображением маркера при столкновении (наложении) с другим маркером. Поведение при столкновении поддерживается только на векторных картах.

Чтобы задать поведение столкновения, задайте для AdvancedMarkerElement.collisionBehavior одно из следующих значений:

  • REQUIRED : (по умолчанию) Всегда отображать маркер независимо от столкновения.
  • OPTIONAL_AND_HIDES_LOWER_PRIORITY Отображать маркер только в том случае, если он не перекрывается другими маркерами. Если два маркера этого типа перекрываются, отображается тот, у которого zIndex больше. Если у них одинаковый zIndex , отображается тот, у которого меньше вертикальное положение на экране.
  • REQUIRED_AND_HIDES_OPTIONAL Всегда отображать маркер независимо от столкновения и скрывать любые OPTIONAL_AND_HIDES_LOWER_PRIORITY маркеры или метки, которые могут перекрываться с маркером.

В следующем примере показана настройка поведения при столкновении для маркера:

Машинопись 

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

Установить высоту маркера

На векторных картах можно задать высоту, на которой будет отображаться маркер. Это полезно для корректного отображения маркеров относительно трёхмерного содержимого карты. Чтобы задать высоту маркера, укажите значение LatLngAltitude в качестве значения параметра MarkerView.position :

Машинопись 

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

Управление видимостью маркера с помощью уровня масштабирования карты

Посмотрите, как меняется видимость маркеров (начните с уменьшения масштаба):

Чтобы управлять видимостью расширенного маркера, создайте прослушиватель zoom_changed и добавьте условную функцию для установки AdvancedMarkerElement.map в null , если масштаб превышает указанный уровень, как показано в следующем примере:

Машинопись 

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

Следующие шаги

Сделайте маркеры кликабельными и доступными