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

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

настроить для маркера поведение при наложении;
задать высоту маркера;
настроить видимость маркера на разных уровнях масштабирования.

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

Настройки поведения при наложении определяют, как будет отображаться маркер в случаях, когда он пересекается с другим маркером. Эта функция поддерживается только на векторных картах.

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

REQUIRED (значение по умолчанию). Маркер показывается всегда, независимо от наложения.
OPTIONAL_AND_HIDES_LOWER_PRIORITY. Маркер показывается только при отсутствии пересечения с другими маркерами. Если два маркера этого типа накладываются друг на друга, показывается тот, у которого выше zIndex. При одинаковом значении zIndex показывается маркер, расположенный ниже по вертикали.
REQUIRED_AND_HIDES_OPTIONAL. Маркер показывается всегда, независимо от наложения. При этом маркеры OPTIONAL_AND_HIDES_LOWER_PRIORITY и ярлыки, пересекающиеся с этим маркером, скрываются.

В примере ниже показано, как настроить для маркера поведение при наложении.

TypeScript

const advancedMarker = new google.maps.marker.AdvancedMarkerView({
  position: new google.maps.LatLng({ lat, lng }),
  map,
  collisionBehavior: collisionBehavior,
});index.ts

JavaScript

const advancedMarker = new google.maps.marker.AdvancedMarkerView({
  position: new google.maps.LatLng({ lat, lng }),
  map,
  collisionBehavior: collisionBehavior,
});
index.js

Как задать высоту маркера

На векторной карте можно задать высоту, на которой будет отображаться маркер. Благодаря этому вы можете правильно расположить маркер на 3D-объекте. Чтобы задать высоту маркера, задайте для атрибута MarkerView.position значение LatLngAltitude.

TypeScript

const pinView = new google.maps.marker.PinView({
    background: '#4b2e83',
    borderColor: '#b7a57a',
    glyphColor: '#b7a57a',
    scale: 2.0,
});

const markerView = new google.maps.marker.AdvancedMarkerView({
    map,
    content: pinView.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 pinView = new google.maps.marker.PinView({
  background: "#4b2e83",
  borderColor: "#b7a57a",
  glyphColor: "#b7a57a",
  scale: 2.0,
});
const markerView = new google.maps.marker.AdvancedMarkerView({
  map,
  content: pinView.element,
  // Set altitude to 20 meters above the ground.
  position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 },
});index.js

Как настроить видимость маркера на разных уровнях масштабирования

Посмотрите, как изменится видимость этих маркеров, если вы уменьшите масштаб:

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

TypeScript

map.addListener('zoom_changed', () => {
    const zoom = map.getZoom();
    if (zoom) {
        // Only show each marker above a certain zoom level.
        markerView01.map = zoom > 14 ? map : null;
        markerView02.map = zoom > 15 ? map : null;
        markerView03.map = zoom > 16 ? map : null;
        markerView04.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.
    markerView01.map = zoom > 14 ? map : null;
    markerView02.map = zoom > 15 ? map : null;
    markerView03.map = zoom > 16 ? map : null;
    markerView04.map = zoom > 17 ? map : null;
  }
});index.js

Дальнейшие действия

Узнайте, как сделать маркер кликабельным и доступным для перетаскивания.