На мобильных устройствах с сенсорным экраном обычно нет такого элемента ввода информации как мышь и соответствующих событий — mousewheel. Все манипуляции производится касаниями к экрану.
Листая касанием одного пальца, вы прокручиваете веб-страницу, но если вы попадаете на область контейнера карты, то она интерпретирует данное действие как dgagging. То есть вы начинаете смещать карту, вместо прокрутки страницы.
А если слой карты оказывается ещё и больше или равен по высоте логическому разрешению устройства вывода, то пользователь оказывается «заперт» в карте, т.к. не может «промотать» её контейнер.
Потому для пролистывания карты часто используют двойное касание (то есть касания двумя или более пальцами), как для масштабирования.
Теперь посмотрим как заставить leaflet карту обработать только мультикасания для выполнения смещения карты в контейнере.
Теория очень проста — при касании в одной точке, мы отключаем dragging опцию вообще, тогда карта перемещается вместе со всем документом. При касании в нескольких точках — опцию dragging нужно включить.
На практике это реализуется в виде следующего кода на js.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
var map = L.map(map_id, { tap: false, // и еще какие то параметры для карты ... }); // и добавляем обработку поведения: // если в событии касания более двух точек касания, // то разрешаем двигать карту (enable dragging) var el = document.getElementById(map_id); el.addEventListener("touchstart", function (e) { if (e.touches.length >= 2) { map.dragging.enable(); } else { map.dragging.disable(); } }, false); el.addEventListener("touchend", function (e) { if (e.touches.length < 2) { map.dragging.disable(); } }, false); |
Второй обработчик можно не использовать, тогда (наверное) движение, начатое двумя касаниями, можно будет продолжать и в одно касание. Можете поэкспериментировать :).
