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

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

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

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

Задайте поведение столкновения для маркера.

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

Чтобы задать поведение при столкновении, установите для 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 }),
    collisionBehavior: collisionBehavior,
});
mapElement.appendChild(advancedMarker);
index.ts

JavaScript 

const advancedMarker = new AdvancedMarkerElement({
    position: new google.maps.LatLng({ lat, lng }),
    collisionBehavior: collisionBehavior,
});
mapElement.appendChild(advancedMarker);
index.js

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

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

Машинопись 

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

mapElement.append(marker);
index.ts

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);
index.js

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

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

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

Машинопись 

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

JavaScript 

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

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

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