Disabilita Ctrl + Scorri per ingrandire le mappe di Google

95

Qualcuno sa come disabilitare il CTRL+ Scroll?

Per prima cosa, quando la rotellina del mouse veniva spostata, la mappa ingrandiva / riduceva. Ma ora chiede di premere CTRL+ Rotellina del mouse Scorri per ingrandire / ridurre.

Come disabilitiamo questa funzione? Non riesco a trovare nulla nella documentazione:

https://developers.google.com/maps/documentation/javascript/controls#ControlOptions

javascript google-maps

— Dawood Awan
fonte

questo link può aiutare a stackoverflow.com/questions/21992498/...~~V~~singular~~2nd

— Brajesh Kanungo

@BrajeshKanungo che non è correlato alla funzionalità di cui sopra - questa è una nuova funzionalità introdotta da Google Maps - voglio disabilitarla.

— Dawood Awan

Ok puoi dirmi quale versione API stai usando.

— Brajesh Kanungo

l'ultima versione - maps.googleapis.com/maps/api/js?v=3.exp

— Dawood Awan

Questo è appena apparso anche sul nostro sito, quindi probabilmente un aggiornamento sull'API di Google

— Tom

153

Devi passare gestureHandling: 'greedy'alle opzioni della mappa.

Documentazione: https://developers.google.com/maps/documentation/javascript/interaction#gestureHandling

Per esempio:

const map = new google.maps.Map(mapElement, {
  center: { 0, 0 },
  zoom: 4,
  gestureHandling: 'greedy'
});

Aggiornare! Poiché Google Maps 3.35.6è necessario racchiudere la proprietà in un wrapper di opzioni:

const map = new google.maps.Map(mapElement, {
  center: { 0, 0 },
  zoom: 4,
  options: {
    gestureHandling: 'greedy'
  }
});

Grazie ealfonsoper le nuove informazioni

— kano
fonte

@DiegoAndrade Non sono a conoscenza dei dettagli. forse non è stato implementato allora. Ma è presente nelle versioni 3.29(congelate), 3.30(rilascio) e superiori ( 3.exp, sperimentale).

— kano

Sì @Kano, in questi documenti questa funzione è ancora presente, ma nei miei test qui non funziona. Non so davvero perché abbiano rimosso questo :(

— Diego Andrade

1

So che è presente. Questo è il punto. Iniziando con 3.30non funziona. Ho provato tutte queste versioni. Comunque, ormai funziona con 3.26.

— Diego Andrade

3

finalmente la risposta giusta. Mi ci è voluto molto tempo per cercare su Google per questo. Perché Google non ha impostato questo valore predefinito è al di là di me.

— woens

2

Bingo, questa è la soluzione perfetta.

— N Khan

17

Se sei d'accordo con la disabilitazione completa dello scorrimento per lo zoom, puoi usare scrollwheel: false. L'utente sarà comunque in grado di ingrandire la mappa facendo clic sui pulsanti di zoom se gli si fornisce il controllo dello zoom ( zoomControl: true).

Documentazione: https://developers.google.com/maps/documentation/javascript/reference (cerca nella pagina "scrollwheel")

const map = new google.maps.Map(mapElement, {
  center: { 0, 0 },
  zoom: 4,
  scrollwheel: false,
  zoomControl: true
});

— Brendan Benson
fonte

7

Se stai cercando di nascondere solo l'overlay ma disabilitare comunque la possibilità di scorrere e ingrandire (come prima), puoi usare CSS per nascondere l'overlay:

.gm-style-pbc {
opacity: 0 !important;
}

Nota che questo lo nasconderà anche per i dispositivi mobili, quindi potresti usare qualcosa di simile per assicurarti che mostri "usa due dita per spostare la mappa":

@media only screen and ( min-width: 980px ) {
.gm-style-pbc {
opacity: 0 !important;
}
}

— Chumtarou
fonte

Grazie. Sono sorpreso che più persone non lo vogliano. È un messaggio di sovrapposizione molto distraente che praticamente distrugge l'esperienza della mappa per me.

— BaseZen

5

La nidificazione gestureHandlingall'interno di una optionsproprietà ha funzionato per me nella versione "3.35.6".

map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        options:{
            gestureHandling: 'greedy'
        }
    });

— ealfonso
fonte

4

Non sono riuscito a far funzionare la gestureHandling: 'greedy'correzione per me poiché avevo una sovrapposizione sulla mappa. Ho finito per rilevare l' mousewheelevento e impostare la ctrlproprietà su true.

// Load maps and attach event listener to scroll event.
var $map = $('.map');
$map[0].addEventListener('wheel', wheelEvent, true);         

function wheelEvent(event) {
    // Set the ctrlKey property to true to avoid having to press ctrl to zoom in/out.
    Object.defineProperty(event, 'ctrlKey', { value: true });
}

— MisterMystery
fonte