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

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

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

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

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

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

Чтобы задать поведение при столкновении, задайте для 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

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

На векторных картах можно задать высоту, на которой появляется маркер. Это полезно для правильного отображения маркеров относительно содержимого 3D-карты. Чтобы задать высоту для маркера, укажите 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

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

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