Abilita scrollwheel per lo zoom su una mappa al clic utilizzando l'API di Google Maps

Question

Sto utilizzando lo Google Maps API e volevo poter scorrere oltre la mappa su un dispositivo mobile e non avere lo zoom della mappa quando si scorre una pagina Web utilizzando la rotellina.

Ecco il mio codice:

var mapOptions = { 
    center: new google.maps.LatLng(51.605139, -2.918567), 
    zoom: 15, 
    scrollwheel: false, 
    draggable: false, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

Questo va bene, ma quello che vorrei raggiungere è quello di consentire rotella zoom solo quando la mappa è stato cliccato.

(Così in una pagina web, quando scatto la mappa, posso lo zoom su di esso, o di un dispositivo mobile, Quando si tocca lo schermo, allora posso pizzico e lo zoom/trascinare la mappa in giro.)

Posso aggiungere un listener di eventi per l'attivazione trascinabile solo con doppio clic o singolo clic?
È possibile utilizzare l'API?

---

EDIT

Ho provato il seguente codice, ma non sembra funzionare:

google.maps.event.addListener(map, 'click', function (event) { 
    var mapOptions = { 
    draggable: true, 

    }; 
}); 

Answer 1

Questo dovrebbe funzionare:

 google.maps.event.addListener(map, 'click', function(event){ 
      this.setOptions({scrollwheel:true}); 
     }); 

Answer 2

google.maps.event.addListener(map, 'mouseout', function(event){ 
this.setOptions({scrollwheel:false}); 
}); 

questo è una piccola considerazione a parte la risposta di Dr.Molle.

così come appare, questo disabiliterà lo zoom della rotellina quando il mouse lascia la mappa.

Answer 3

Ho trovato una soluzione e ho raccolto il codice completo per disabilitare lo scroll on load e abilitare lo scroll zoom sul click.

Disabilita scorrimento sul carico: rotella: false, Ascolta cliccare evento sulla mappa e consentire rotella: vero,

map.addListener('click', function() { 
    map.set('scrollwheel', true); 
}); 

Si prega di trovare il codice nel mio blog: http://anasthecoder.blogspot.ae/

Answer 4

questo è quello che in genere fanno:

utente interagisce con la mappa (mousedown) -> impostare stradale
mouse poggia sulla Mappa per oltre 1 secondo -> set stradale
mouse va fuori la cartina -> Set non stradale

Questo di solito ottiene il lavoro svolto. Quando l'utente è nella mentalità di scorrere la pagina, la mappa segue. Quando l'utente desidera eseguire lo zoom in/out, è necessario interagire con esso o avere il puntatore lì per un breve periodo.

Il codice sorgente:

google.maps.event.addListener(map, 'mousedown', function(event){ 
    this.setOptions({scrollwheel:true}); 
    }); 
    google.maps.event.addListener(map, 'mouseover', function(event){ 
    self = this; 
    timer = setTimeout(function() { 
     self.setOptions({scrollwheel:true}); 
    }, 1000); 
    }); 
    google.maps.event.addListener(map, 'mouseout', function(event){ 
    this.setOptions({scrollwheel:false}); 
    clearTimeout(timer); 
    }); 

Answer 5

Questo è il mio esempio e funziona per me. Quando la pagina viene caricata, la mappa di google (scroll wheel) è disattivata quando si fa clic sulla mappa (scroll wheel) attivata.

var map = new google.maps.Map(document.getElementById('map-id'), { 
      scrollwheel: false, 
     }); 
     google.maps.event.addListener(map, 'mouseout', function(){ 
      this.setOptions({scrollwheel:false}); 
     }); 
     map.addListener('click', function() { 
      map.set('scrollwheel', true); 
     }); 

Answer 6

questo sarà impostato mappa, al clic di carta se il valore rotella è falso che renderà vero, se è vero & farà falso.

function initMap() { 

     var florida = { 
     lat: 27.5814346, 
     lng: -81.0534459 
     }; 

     var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 6, 
     center: florida, 
     scrollwheel: false 
     }); 


     google.maps.event.addListener(map, 'click', function(event) { 
     if (this.scrollwheel == false) { 
      this.setOptions({ 
      scrollwheel: true 
      }); 
     } else { 
      this.setOptions({ 
      scrollwheel: false 
      }); 
     } 
     }); 

    }