Яндекс Карты api v 3 перетаскивание двумя пальцами на мобильных и тач-девайсах

Как сделать масштабирование (pinchZoom) и перетаскивание (drag) карты на мобильном / тач-устройстве только двумя и более пальцами? А если участвует только один палец, то только разрешить скроллить блок с картой вниз-вверх (т.е. просто пролистывание блока с картой, карта остается неподвижной). Ответы для api 2 не подходят. Просто отключение drag в behaviors не помогает - тогда целый блок с картой перестает двигаться любым количество пальцев.

Попробовал скрипт с определением количества касаний и наложением pointer-events на карту. Но перестает работать pinchZoom. Подозреваю, что с количеством касаний не все так просто и логика там может быть сложнее.

Условный код:

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

// Убираем временно взаимодействие с картой при загрузке
window.addEventListener('load', () => {
    // Определяем, что тач-девайс / мобильное устройство
    if ( ('ontouchstart' in window || navigator.maxTouchPoints || navigator.msMaxTouchPoints) && mapEl) {
        mapEl.firstElementChild.style.pointerEvents = 'none';
    }
});

// Определяем количество нажатий и добавляем / убираем взаимодействие с картой

mapEl.addEventListener('touchstart', (e) => {
    // Со старта нажатия разрешаем
    mapEl.firstElementChild.style.pointerEvents = 'auto';
});

mapEl.addEventListener('touchmove', (e) => {
    if (e.touches.length >= 2) {
        mapEl.firstElementChild.style.pointerEvents = 'auto';
    } else {
        mapEl.firstElementChild.style.pointerEvents = 'none';
    }
});

mapEl.addEventListener('touchend', (e) => {
    mapEl.firstElementChild.style.pointerEvents = 'none';
});

Может кто-то уже решил эту задачу? Или есть более простое решение?


Ответы (0 шт):