Zoom rotellina del volantino solo dopo aver fatto clic sulla mappa

19

Sto lavorando con la libreria JavaScript Leaflet e ho allegato una mappa (funzionante) al mio documento HTML. Si trova al centro della pagina e quando sto scorrendo verso il basso con la rotellina del mouse e arrivo sulla mappa, ingrandisce automaticamente la mappa.

Voglio scorrere la pagina senza fermarmi sulla mappa. C'è un modo per attivare lo zoom della ruota solo dopo il primo clic sulla mappa?

— Jandroide
fonte

27

È semplice: crea L.Map con scrollWheelZoom: falseopzione, quindi aggiungi un ascoltatore:

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

Se è necessario attivare / disattivare lo zoom:

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

— Ilja Zverev
fonte

Grazie :) Ho iniziato un commento per questo, ma sono diventato troppo grande, quindi rispondi qui sotto .

— danwild,

13

Più di un commento / miglioramento sulla componente attiva / disattiva della risposta accettata , il che è fantastico (grazie). Ma.

Quando interagisce con una mappa, per molti casi d'uso l'utente deve anche fare clic sulla mappa per eseguire il proprio compito, quindi questo:

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

Può comportare un comportamento imprevisto quando l'utente inizia a utilizzare effettivamente la mappa.

Vorrei suggerire qualcosa che può sembrare un po 'più intuitivo per l'utente - fare clic sulla mappa per disabilitare lo scorrimento del mouse .

Ad esempio, imposta scrollWheelZoom: falsecome sopra, quindi:

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

— danwild
fonte

1

L'uso focus/ blurrende sicuramente la funzionalità della mappa molto più intuitiva.

— Raddoppio

Concordato. L'approccio di messa a fuoco / sfocatura è eccezionale. Grazie!

— sstringer,

Fantastico, ma necessita di un mezzo per disabilitare lo scorrimento se la mappa è a schermo intero e l'utente scorre avanti e indietro in rapida successione (apportando diverse modifiche direzionali in un secondo). Questo scorrimento su e giù confuso si verifica quando sono bloccati e non possono lasciare la mappa del browser completo per accedere al contenuto sopra o sotto di esso.

— Loren,

6

Leaflet.Sleep renderà il tuo lavoro facile ed è molto configurabile

Fondamentalmente, disattiva gli eventi di scorrimento quando non sono necessari e "riattiva" la tua mappa quando lo sono.

Pubblica il codice, ma le impostazioni predefinite sembrano farlo bene, quindi probabilmente non avrai bisogno di nulla oltre <script src="path/to/leaflet-sleep.js"></script>e avrai una mappa come questa .

— user3276552
fonte

0

Puoi farlo solo con quelle 3 righe:

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

o:

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

— ofir_aghai
fonte