Збільшити колесо миші з листочком можна лише після натискання на карту

19

Я працюю з JavaScript-бібліотекою Leaflet і додаю (працюючу) карту до мого HTML-документа. Він знаходиться в середині сторінки, і коли я прокручую коліщатку миші та приїжджаю до карти, він автоматично збільшує масштаб карти.

Я хочу прокручувати сторінку, не зупиняючись на карті. Чи є спосіб активувати зум колеса лише після першого клацання на карті?

— Яндроїд
джерело

27

Це просто: створіть L.Map з scrollWheelZoom: falseопцією, а потім додайте слухача:

map.once('focus', function() { map.scrollWheelZoom.enable(); });

Якщо вам потрібно змінити масштабування:

map.on('click', function() {
  if (map.scrollWheelZoom.enabled()) {
    map.scrollWheelZoom.disable();
    }
    else {
    map.scrollWheelZoom.enable();
    }
  });

— Ілля Звєрєв
джерело

Дякую :) Я почав коментар до цього, але став занадто великим, тому ставте відповідь нижче .

— danwild

13

Більше коментарів / удосконалень щодо переключеного компонента прийнятої відповіді , що чудово (спасибі). Але.

Під час взаємодії з картою для багатьох випадків використання користувачеві також потрібно натиснути на карту, щоб виконати своє завдання, так що:

map.on('click', function() {
  if (map.scrollWheelZoom.enabled()) {
    map.scrollWheelZoom.disable();
    }
    else {
    map.scrollWheelZoom.enable();
    }
  });

Це може призвести до несподіваної поведінки, коли користувач почне фактично використовувати карту.

Я б запропонував щось, що може здатися користувачеві трохи інтуїтивнішим - натисніть карту, щоб відключити прокрутку миші .

Наприклад, встановіть так, scrollWheelZoom: falseяк описано вище, тоді:

map.on('focus', function() { map.scrollWheelZoom.enable(); });
map.on('blur', function() { map.scrollWheelZoom.disable(); });

— danwild
джерело

1

Використання focus/ blurбезумовно робить функціональність карти набагато інтуїтивнішою.

— подвійний горез

Домовились. Фокус / розмиття підхід чудовий. Спасибі!

— sstringer

Чудово, але потрібен засіб для відключення прокрутки, якщо карта є повноекранною, а користувач швидко прокручує та вмикає (вносить декілька змін у напрямку в одну секунду). Це заплутане прокручування вгору і вниз відбувається, коли вони застрягли і не можуть залишити карту повного браузера для доступу до вмісту над або під ним.

— Лорен

6

Leaflet.Sleep зробить вашу роботу легкою, і її можна легко налаштувати

В основному він вимикає події прокрутки, коли вони не потрібні, і "розбуджує" вашу карту, коли вони є.

Я б розмістити код, але за замовчуванням , здається , щоб отримати це право, так що ви , ймовірно , не буде нічого , крім потрібно , <script src="path/to/leaflet-sleep.js"></script>і ви будете мати карту , як це .

— user3276552
джерело

0

Це можна зробити лише за допомогою цих 3 рядків:

map.scrollWheelZoom.disable();
map.on('focus', () => { map.scrollWheelZoom.enable(); });
map.on('blur', () => { map.scrollWheelZoom.disable(); });

або:

map.scrollWheelZoom.disable();
this.map.on('click', () => { this.map.scrollWheelZoom.enable();});
this.map.on('mouseout', () => { this.map.scrollWheelZoom.disable();});

— ofir_aghai
джерело