2

На встроенных в страницы картах зумирование скроллом только мешает при прокрутке страницы, но и полностью отключать его не хочется. Решил использовать скролл при зажатом Ctrl. Однако возникли сложности. У события wheel карты нет свойства ctrlKey. Значит, вариантов остаётся два:

  1. Слушать события on('wheel mousewheel DOMMouseScroll', ...) контейнера карты и масштабировать через setCenter, но тогда возникает сложность с масштабированием именно под указатель мыши, а не центрировать карту на координаты под указателем. Нужно сделать какие-то сложные вычисления, или есть более простой способ?

  2. Либо второй вариант: при прослушивании своих событий on('wheel mousewheel DOMMouseScroll', ...) не запускать setCenter, а эмулировать событие wheel карты, тогда карта по идее сама должна знать, как обработать координаты точки скролла на карте. Вопрос - как в этом случае правильно запускать wheel через fire? Какие параметры передавать?

Может, есть и более простой способ как-то обрабатывать wheel карты с зажатым Ctrl...

2 ответа 2

2

Не уверен, что этот вариант имеет право на жизнь, но как на счёт слушать событие нажатия клавиши "ctrl" и включать и выключать событие скролла.

myMap.behaviors.disable(['scrollZoom']);
var body = document.getElementsByTagName('body')[0];
body.onkeydown = callbackDown;
body.onkeyup = callbackUp;
function callbackDown(e){
    if(e.keyCode === 17){
        myMap.behaviors.enable(['scrollZoom']);
    }
}
function callbackUp(e){
    if(e.keyCode === 17){
        myMap.behaviors.disable(['scrollZoom']);
    }
}
6
  • Даже в крайнем случае не хочется использовать такой вариант. Рассматривал его. Можно даже его улучшить, проверяя текущий статус scrollZoom через isEnabled(). Но идея вызывать этот код при каждом срабатывании onkeydown не очень мне нравится. Commented 23 авг. 2018 в 9:07
  • А почему "идея вызывать этот код при каждом срабатывании onkeydown не очень мне нравится." ?
    – se0ga
    Commented 23 авг. 2018 в 9:42
  • Осмелюсь тогда спросить, почему вы написали "Не уверен, что этот вариант имеет право на жизнь"? Думал, именно из-за множественного срабатывания события при зажатой клавише. Commented 23 авг. 2018 в 10:02
  • "Не уверен, что этот вариант имеет право на жизнь" потому, что я ненастоящий программист и не умею настоящее промышленное программирование) То есть мне показалось, что ничего страшного не произойдет если так делать)
    – se0ga
    Commented 23 авг. 2018 в 10:23
  • Мне кажется, вы себя недооцениваете! Вы же наверняка знаете о том, что onkeydown срабатывает до тех пор, пока клавиша нажата: https://learn.javascript.ru/article/keyboard-events/keyboard-dump/ То есть придётся иметь дело с множественным вызовом кода при зажатии клавиши Ctrl. Хотелось бы этого избежать. Commented 23 авг. 2018 в 11:18
2

Вариант, предложенный @se0ga заслуживает всё же право на жизнь с небольшими дополнениями. Так как я использую JQuery, то воспользовался его методами keydown() и keyup().

Добавляем нашу заглушку на карту:

<div id="ymap_ctrl_display" style="display: none; width: 100%; height: 100%; position: absolute; background-color: rgba(0, 0, 0, 0.5); z-index: 100; pointer-events: none;">
    <div style="position: relative; top: 50%; left: 0; right: 0; color: white; text-align: center; font-size: 1.8em; pointer-events: none;">Чтобы изменить масштаб, прокручивайте карту, удерживая клавишу Ctrl.</div>
</div>

Затем js:

myMap.behaviors.disable('scrollZoom');

var ctrlKey = false;
var ctrlMessVisible = false;
var timer;

// Отслеживаем скролл мыши на карте, чтобы показывать уведомление
myMap.events.add(['wheel', 'mousedown'], function(e) {
    if (e.get('type') == 'wheel') {
        if (!ctrlKey) { // Ctrl не нажат, показываем уведомление
            $('#ymap_ctrl_display').fadeIn(300);
            ctrlMessVisible = true;
            clearTimeout(timer); // Очищаем таймер, чтобы продолжать показывать уведомление
            timer = setTimeout(function() {
                $('#ymap_ctrl_display').fadeOut(300);
                ctrlMessVisible = false;
            }, 1500);
        }
        else { // Ctrl нажат, скрываем сообщение
            $('#ymap_ctrl_display').fadeOut(100);
        }
    }
    if (e.get('type') == 'mousedown' && ctrlMessVisible) { // Скрываем уведомление при клике на карте
        $('#ymap_ctrl_display').fadeOut(100);
    }
});

// Обрабатываем нажатие на Ctrl
$(document).keydown(function(e) {
    if (e.which === 17 && !ctrlKey) { // Ctrl нажат: включаем масштабирование мышью
        ctrlKey = true;
        myMap.behaviors.enable('scrollZoom');
    }
});
$(document).keyup(function(e) { // Ctrl не нажат: выключаем масштабирование мышью
    if (e.which === 17) {
        ctrlKey = false;
        myMap.behaviors.disable('scrollZoom');
    }
});

Как видно из кода, мы не допускаем повторный вызов enable('scrollZoom'). Всё работает отлично!

Чтобы изменить масштаб, прокручивайте карту, удерживая клавишу Ctrl.

Выглядит так: http://jsfiddle.net/3p7vktcf/

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.