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

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

На этой странице показано, как настроить поведение при столкновении для маркера. Поведение при столкновении определяет, как будет отображаться маркер, если он столкнется (перекроется) с другим маркером.

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

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

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

const marker = new Marker3DElement({
    position: { lat, lng },
    // Try setting a different collision behavior here.
    collisionBehavior: 'REQUIRED',
});
index.js

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

Вы можете управлять поведением столкновения метки и текста подписи маркера отдельно. В некоторых случаях может быть полезно скрыть подписи, оставив метки маркеров видимыми на экране, чтобы сохранить контекст. Для этого добавьте элемент <gmp-label-3d> в качестве соседнего элемента к <gmp-marker-3d> и свяжите их с помощью атрибута for .

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

const markerWithIndependentLabel = new Marker3DElement({
    position: { lat: 37.423, lng: -122.015 },
});
markerWithIndependentLabel.id = 'marker-1';
const label = new Label3DElement({
    collisionBehavior: CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY,
    for: 'marker-1',
});
label.append('Independent label example');
map.append(markerWithIndependentLabel);
map.append(label);
index.js