Déplacement de la molette de la souris uniquement après avoir cliqué sur la carte

Je travaille avec la bibliothèque JavaScript de Leaflet et j'ai joint une carte (de travail) à mon document HTML. Il se trouve au milieu de la page, et lorsque je défile avec la molette de la souris et que j'arrive à la carte, il zoome automatiquement sur la carte.

Je veux faire défiler la page sans m'arrêter sur la carte. Existe-t-il un moyen d'activer le zoom de la roue uniquement après le premier clic sur la carte?

C'est simple: créez L.Map avec scrollWheelZoom: falseoption, puis ajoutez un écouteur:

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

Si vous devez basculer le zoom:

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

Plus d'un commentaire / amélioration sur le composant bascule de la réponse acceptée , ce qui est super (merci). Mais.

Lors de l'interaction avec une carte, pour de nombreux cas d'utilisation, l'utilisateur doit également cliquer sur la carte pour effectuer sa tâche, donc ceci:

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

Peut entraîner un comportement inattendu une fois que l'utilisateur commence réellement à utiliser la carte.

Je suggérerais quelque chose qui peut sembler un peu plus intuitif à l'utilisateur - cliquez sur la carte pour désactiver le défilement de la souris .

Par exemple, définissez votre scrollWheelZoom: falsecomme ci-dessus, puis:

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

Leafle.Sleep rendra votre travail facile, et il est largement configurable

Fondamentalement, il désactive les événements de défilement lorsqu'ils ne sont pas nécessaires et "réveille" votre carte lorsqu'ils le sont.

Je publierais du code, mais les valeurs par défaut semblent le faire correctement, vous n'aurez donc probablement pas besoin de quoi que ce soit au <script src="path/to/leaflet-sleep.js"></script>- delà et vous aurez une carte comme celle-ci .

Vous pouvez le faire uniquement par ces 3 lignes:

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

ou:

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