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

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

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

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

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

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

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

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

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

TypeScript

const advancedMarker = new AdvancedMarkerElement({
    position: { lat, lng },
    collisionBehavior,
});
mapElement.appendChild(advancedMarker);

JavaScript

const advancedMarker = new AdvancedMarkerElement({
    position: { lat, lng },
    collisionBehavior,
});
mapElement.appendChild(advancedMarker);

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

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

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,
    },
});
marker.append(pin);

mapElement.append(marker);

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);

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

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

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

TypeScript

mapElement.innerMap.addListener('zoom_changed', () => {
    const zoom = mapElement.innerMap.getZoom();
    for (let i = 0; i < markers.length; i++) {
        const { position, minZoom } = markerOptions[i];
        markers[i].position = zoom! > minZoom ? position : null;
    }
});

JavaScript

mapElement.innerMap.addListener('zoom_changed', () => {
    const zoom = mapElement.innerMap.getZoom();
    for (let i = 0; i < markers.length; i++) {
        const { position, minZoom } = markerOptions[i];
        markers[i].position = zoom > minZoom ? position : null;
    }
});

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

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