Deaktivieren der Skalierung des Mausrads mit Google Maps API

Question

Ich verwende Google Maps API (v3), um ein paar Karten auf einer Seite zu zeichnen. Eine Sache, die ich tun möchte, ist deaktivieren Zoomen, wenn Sie das Mausrad über die Karte scrollen, aber ich bin unsicher, wie.

Ich habe das scaleControl deaktiviert (d.h. das skalierende UI-Element entfernt), aber das verhindert die Skalierung des Scrollrads nicht.

Hier ist ein Teil meiner Funktion (es ist ein einfaches jQuery-Plugin):

$.fn.showMap = function(options, addr){
  options = $.extend({
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    draggable: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }, options);
  var map = new google.maps.Map(document.getElementById($(this).attr('id')), options);

  // Code cut from this example as not relevant
};

Answer 1

In Version 3 der Maps-API können Sie einfach die scrollwheel Option auf false in der Datei MapOptions Eigenschaften:

options = $.extend({
    scrollwheel: false,
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    draggable: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}, options);

Wenn Sie die Version 2 der Maps-API verwenden würden, müssten Sie die disableScrollWheelZoom() API-Aufruf wie folgt:

map.disableScrollWheelZoom();

Le site scrollwheel In Version 3 der Karten-API ist das Zoomen standardmäßig aktiviert, während es in Version 2 deaktiviert ist, sofern es nicht ausdrücklich mit der Option enableScrollWheelZoom() API-Aufruf.

Answer 2

Daniels Code erfüllt die Aufgabe (vielen Dank!). Aber ich wollte das Zoomen komplett abschalten. Dazu musste ich alle vier dieser Optionen verwenden:

{
  zoom: 14,                        // Set the zoom level manually
  zoomControl: false,
  scaleControl: false,
  scrollwheel: false,
  disableDoubleClickZoom: true,
  ...
}

Siehe: Spezifikation des MapOptions-Objekts

Answer 3

Nur für den Fall, dass Sie dies dynamisch tun wollen;

function enableScrollwheel(map) {
    if(map) map.setOptions({ scrollwheel: true });
}

function disableScrollwheel(map) {
    if(map) map.setOptions({ scrollwheel: false });
}

Manchmal muss man etwas "Komplexes" über der Karte anzeigen (oder die Karte ist nur ein kleiner Teil des Layouts), und dieses Scroll-Zoomen gerät in die Mitte, aber wenn man eine saubere Karte hat, ist diese Art des Zoomens schön.

Answer 4

Halten Sie es einfach! Die Original-Google-Maps-Variable, ohne den ganzen Extra-Kram.

 var mapOptions = {
     zoom: 16,
     center: myLatlng,
     scrollwheel: false

}

Answer 5

Ab sofort (Oktober 2017) hat Google eine spezielle Eigenschaft implementiert, um das Zoomen/Scrollen zu handhaben, genannt gestureHandling . Sie ist für die Bedienung von Mobilgeräten gedacht, ändert aber auch das Verhalten von Desktop-Browsern. Hier ist es von offizielle Dokumentation :

function initMap() {
  var locationRio = {lat: -22.915, lng: -43.197};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: locationRio,
    gestureHandling: 'none'
});

Die verfügbaren Werte für gestureHandling sind:

• 'greedy' : Die Karte schwenkt immer (nach oben oder unten, links oder rechts), wenn der Benutzer über den Bildschirm wischt (zieht). Mit anderen Worten: Sowohl eine Wischbewegung mit einem Finger als auch eine Wischbewegung mit zwei Fingern führt zu einem Schwenken der Karte.
• 'cooperative' : Der Nutzer muss mit einem Finger über die Seite streichen, um zu blättern, und mit zwei Fingern, um die Karte zu schwenken. Wenn der Benutzer mit einem Finger über die Karte wischt, wird ein Overlay auf der Karte angezeigt, mit der Aufforderung, die Karte mit zwei Fingern zu bewegen. Bei Desktop-Anwendungen kann der Benutzer die Karte zoomen oder schwenken, indem er einen Bildlauf durchführt, während er eine Änderungstaste (die Strg- oder Taste) drückt.
• 'none' : Diese Option deaktiviert das Verschieben und Aufziehen der Karte auf mobilen Geräten und das Ziehen der Karte auf Desktop-Geräten.
• 'auto' (Standard): Je nachdem, ob die Seite scrollbar ist, setzt die Google Maps JavaScript-API die Eigenschaft gestureHandling entweder auf 'cooperative' o 'greedy'

Kurz gesagt, Sie können die Einstellung "immer zoomen" einfach erzwingen ( 'greedy' ), "nie zoombar" ( 'none' ), oder "Benutzer muss CRTL/ drücken, um den Zoom zu aktivieren" ( 'cooperative' ).