Aktivieren des Scrollrads Zoomen auf einer Karte nach dem Klicken mit Google Maps API

Question

Ich verwende die Google Maps API und wollte in der Lage sein, auf einem mobilen Gerät über die Karte zu scrollen und nicht den Kartenzoom beim Scrollen einer Webseite mit dem Scrollrad zu verwenden.

Hier ist mein Code:

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

Das ist in Ordnung, aber was ich möchte, ist erreichen, um Scrollrads ermöglichen Zoomen nur, wenn die Karte geklickt wurde.

(also auf einer Webseite, wenn ich die Karte klicken, kann ich auf es zu vergrößern, oder ein mobiles Gerät, wenn ich den Bildschirm auf tippen, dann kann ich kneifen und Zoom/ziehen Sie die Karte um.)

Kann ich einen Ereignis-Listener hinzufügen, um ziehbare Objekte nur mit einem Doppelklick oder einem Klick zu aktivieren?
Ist es möglich, die API zu verwenden?

---

EDIT

ich den folgenden Code versucht, aber es scheint nicht zu funktionieren:

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

    }; 
}); 

Answer 1

Dies sollte funktionieren:

 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}); 
}); 

dieses ist eine praktische kleine Überlegung neben Dr.Molle's Antwort.

So wie es aussieht, wird das Scrollrad-Zoomen wieder deaktiviert, wenn die Maus die Karte verlässt.

Answer 3

Ich fand eine Lösung und sammelte vollständigen Code zum Deaktivieren von Scroll bei Laden und Scroll-Zoom bei Klick aktivieren.

Disable scroll auf Last: Scrollrads: false, Hören Ereignis auf der Karte klicken und aktivieren Scrollrads: true,

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

Bitte den Code in meinem Blog finden: http://anasthecoder.blogspot.ae/

Answer 4

Dies ist, was ich im allgemeinen tun:

Benutzer interagiert mit der Karte (mousedown-) -> gesetzt zoombaren
Maus ruht auf dem Karte für mehr als 1 Sekunde -> set zoombaren
Maus geht aus der Karte -> set nicht zoombar

Diese Regel wird die Arbeit getan. Wenn der Benutzer die Seite scrollen möchte, folgt die Karte. Wenn der Benutzer vergrößern/verkleinern möchte, muss er mit ihm interagieren oder den Zeiger für eine kurze Zeit dort haben.

Der Quellcode:

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

Das ist mein Beispiel und es funktioniert für mich. Wenn Seite geladen wird, ist Google Map (Rad Scroll) deaktiviert, wenn Sie auf Karte (Rad Scroll) klicken.Karte, auf Klick auf Karte gesetzt, wenn der Scroll-Rad-Wert falsch ist es es wahr machen wird, & wenn sie wahr wird falsch machen

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

dies.

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 
      }); 
     } 
     }); 

    }