Отмена стандартного поведения

В JavaScript API HERE Technologies любое интерактивное поведение карты построено вокруг событийной модели браузера и собственного слоя обработки жестов. Карта по умолчанию перехватывает действия пользователя — прокрутку, перетаскивание, клики, контекстное меню — и преобразует их в изменения состояния карты: масштабирование, перемещение центра, открытие объектов.

Контроль над этим механизмом достигается через подавление стандартных обработчиков событий, отключение интерактивных режимов и перехват событий карты до того, как они будут обработаны движком рендеринга.

Перехват событий карты через addEventListener

Любое взаимодействие с картой в HERE Maps API проходит через систему событий:

map.addEventListener('tap', function (evt) {
    console.log(evt.type, evt.currentPointer.type);
});

Событие tap является заменой классического click в мобильных сценариях. Однако стандартное поведение карты (центрирование, открытие объектов, активация bubble) может срабатывать автоматически после выполнения обработчика.

Для полного подавления дальнейшей обработки используется остановка распространения события:

map.addEventListener('tap', function (evt) {
    evt.stopPropagation();
});

stopPropagation() предотвращает передачу события в нижележащие слои системы взаимодействия карты. Это базовый механизм отмены стандартного поведения.

Отмена реакции на DOM-события контейнера

Контейнер карты остаётся DOM-элементом, поэтому часть взаимодействий проходит через браузерный слой. Например, контекстное меню или прокрутка страницы могут конфликтовать с картой.

Для блокировки стандартного контекстного меню:

const mapContainer = document.getElementById('map');

mapContainer.addEventListener('contextmenu', function (e) {
    e.preventDefault();
});

Метод preventDefault() запрещает браузеру выполнять стандартное действие — в данном случае открытие контекстного меню.

Аналогичный подход применяется для блокировки прокрутки страницы при взаимодействии с картой:

mapContainer.addEventListener('wheel', function (e) {
    e.preventDefault();
}, { passive: false });

Параметр passive: false критически важен, поскольку без него браузер может игнорировать preventDefault() для оптимизации производительности.

Отключение интерактивности карты через ViewModel

В HERE Maps API интерактивное поведение централизовано в модели представления карты:

const map = new H.Map(
    document.getElementById('map'),
    defaultLayers.vector.normal.map,
    {
        zoom: 10,
        center: { lat: 52.5, lng: 13.4 },
        pixelRatio: window.devicePixelRatio
    }
);

Поведение карты управляется через map.getViewModel() и map.getViewPort().

Блокировка панорамирования и масштабирования

Полное отключение взаимодействия:

map.getViewModel().setLookAtData({
    tilt: 0,
    zoom: 10
});

map.getViewModel().setMinZoomLevel(10);
map.getViewModel().setMaxZoomLevel(10);

Фиксация диапазона зума фактически устраняет возможность масштабирования.

Управление событиями pointer и touch

Современные браузеры используют pointer events как универсальный слой ввода. HERE Maps API реагирует на них через внутренний gesture manager.

Для блокировки жестов используется перехват pointer-событий:

mapContainer.addEventListener('pointerdown', function (e) {
    e.stopPropagation();
    e.preventDefault();
}, true);

Использование третьего параметра true переводит обработчик в фазу capture, позволяя перехватывать событие до того, как оно попадёт в систему карты.

Отключение стандартных жестов карты

Геоинтерфейс по умолчанию поддерживает:

  • drag (перетаскивание)
  • pinch zoom (масштабирование двумя пальцами)
  • double tap zoom
  • kinetic scrolling

Отключение осуществляется через конфигурацию поведения карты:

const map = new H.Map(
    document.getElementById('map'),
    defaultLayers.vector.normal.map,
    {
        center: { lat: 52.5, lng: 13.4 },
        zoom: 10,
        pixelRatio: window.devicePixelRatio,
        gestures: {
            pan: false,
            zoom: false,
            pinchRotate: false,
            kineticPan: false
        }
    }
);

Каждый флаг отвечает за конкретный тип взаимодействия. При отключении всех жестов карта становится статичной визуализацией.

Блокировка поведения InfoBubble и объектов карты

Объекты карты (markers, polylines, polygons) по умолчанию реагируют на события tap, открывая информационные окна.

Для отключения стандартного поведения:

marker.addEventListener('tap', function (evt) {
    evt.stopPropagation();
});

При этом событие не доходит до логики открытия InfoBubble.

Если используется глобальный менеджер пузырей:

ui.getBubbles().forEach(bubble => ui.removeBubble(bubble));

Это принудительно удаляет все активные всплывающие элементы, созданные системой UI.

Перехват событий слоя (Map Layers)

Каждый слой карты может генерировать собственные события. Например, векторные тайлы или интерактивные объекты.

map.addEventListener('pointermove', function (evt) {
    const pixel = map.screenToGeo(
        evt.currentPointer.viewportX,
        evt.currentPointer.viewportY
    );
});

Если требуется полностью отключить реакцию слоёв, применяется фильтрация событий на уровне карты:

map.addEventListener('pointermove', function (evt) {
    evt.stopImmediatePropagation();
});

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

Отключение стандартного поведения зума колесом мыши

Колёсико мыши является одним из самых агрессивных источников автоматического поведения карты.

mapContainer.addEventListener('wheel', function (e) {
    e.preventDefault();
    e.stopPropagation();
}, { passive: false });

Для полного контроля также блокируется встроенный handler карты:

map.getZoomControl().setDisabled(true);

Изоляция карты от событий страницы

При интеграции карты в интерфейсы с прокруткой часто возникает конфликт между scroll страницы и zoom карты.

Решение заключается в изоляции событий:

function blockMapEvents(e) {
    e.stopPropagation();
}

['wheel', 'touchmove', 'pointerdown'].forEach(event => {
    mapContainer.addEventListener(event, blockMapEvents, { passive: false });
});

Это создаёт слой перехвата, полностью отделяющий карту от DOM-окружения.

Принудительная фиксация состояния карты

В некоторых сценариях требуется не просто отменить действия пользователя, но и предотвращать любые изменения состояния.

map.addEventListener('mapviewchange', function () {
    map.setZoom(12);
    map.setCenter({ lat: 52.5, lng: 13.4 });
});

Любая попытка изменения состояния мгновенно откатывается. Такой подход превращает карту в строго контролируемую визуализацию.

Блокировка событий через прозрачный overlay

Поверх карты может быть размещён прозрачный слой, перехватывающий все события:

<div id="map-wrapper">
    <div id="map"></div>
    <div id="overlay"></div>
</div>
#overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}
document.getElementById('overlay').addEventListener('click', function (e) {
    e.stopPropagation();
    e.preventDefault();
});

Такой слой полностью блокирует взаимодействие с картой без изменения её конфигурации.

Управление поведением через lifecycle карты

Некоторые стандартные реакции активируются только после полной инициализации карты. Для их отключения применяется ранняя настройка:

const platform = new H.service.Platform({
    apikey: 'API_KEY'
});

const defaultLayers = platform.createDefaultLayers();

const map = new H.Map(
    document.getElementById('map'),
    defaultLayers.vector.normal.map,
    {
        center: { lat: 52.5, lng: 13.4 },
        zoom: 10,
        pixelRatio: window.devicePixelRatio
    },
    {
        pixelRatio: window.devicePixelRatio
    }
);

Перед подключением UI и событий можно полностью настроить поведение, чтобы избежать активации стандартных gesture-обработчиков.

Контроль над последовательностью событий

События в HERE Maps API имеют строгую иерархию. Правильный порядок подавления:

  1. DOM preventDefault()
  2. DOM stopPropagation()
  3. Map stopPropagation()
  4. Map stopImmediatePropagation()

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

Отключение стандартного UI слоя

UI слой карты добавляет встроенные элементы управления, которые также имеют собственные события:

const ui = H.ui.UI.createDefault(map, defaultLayers);
ui.getControl('zoom').setVisibility(false);
ui.getControl('mapsettings').setVisibility(false);

Удаление UI предотвращает автоматическое вмешательство в поведение карты и исключает дополнительные источники событий.

Итоговая модель управления поведением

Отмена стандартного поведения в HERE Maps API формируется как многослойная система контроля:

  • блокировка DOM-событий контейнера
  • подавление событий карты через stopPropagation
  • отключение жестов через конфигурацию gestures
  • фиксация состояния через ViewModel
  • перехват pointer и wheel событий
  • управление UI и InfoBubble слоями
  • изоляция через overlay или capture-фазы событий

Эти механизмы могут использоваться независимо или комбинироваться для построения полностью контролируемого интерактивного поведения карты.

Оглавление