So deaktivieren Sie die Mausrad Skalierung mit Google Maps API

Ich verwende Google Maps API (v3), um einige Karten auf einer Seite zu zeichnen. Eine Sache, die ich tun möchte, ist Zoomen zu deaktivieren, wenn Sie mit dem Mausrad über die Karte scrollen, aber ich bin mir nicht sicher, wie.

Ich habe das scaleControl deaktiviert (dh das Skalierungs-UI-Element entfernt), aber das verhindert nicht die Scrollradskalierung.

Hier ist ein Teil meiner function (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 }; 

   

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

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

Wenn Sie Version 2 der Google Maps-API verwendet hätten, müssten Sie den API-Aufruf disableScrollWheelZoom () wie folgt verwenden:

 map.disableScrollWheelZoom(); 

Das scrollwheel Zoomen ist standardmäßig in Version 3 der scrollwheel Maps-API aktiviert, in Version 2 ist es jedoch deaktiviert, sofern es nicht explizit mit dem API-Aufruf enableScrollWheelZoom() .

Daniels Code macht den Job (danke einen Haufen!). Aber ich wollte das Zoomen komplett deaktivieren. Ich fand, dass ich alle vier dieser Optionen verwenden musste, um dies zu tun:

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

Siehe: MapOptions-Objektspezifikation

Nur für den Fall, dass Sie dies dynamisch machen möchten;

 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 zeigen (oder die Karte ist ein kleiner Teil des Layouts), und diese Scroll-Vergrößerung wird in der Mitte angezeigt, aber sobald Sie eine saubere Karte haben, ist diese Art zu Zoomen nett.

Halte es einfach! Original Google Maps-Variable, keine der zusätzlichen Sachen.

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

In meinem Fall war es entscheidend, das 'scrollwheel':false in init. Hinweis: Ich verwende jQuery UI Map . Unten ist meine function ” CoffeeScript init”:

  $("#map_canvas").gmap({'scrollwheel':false}).bind "init", (evt, map) -> 

Nur für den Fall, dass Sie die GMaps.js- Bibliothek verwenden, die Dinge wie Geocoding und benutzerdefinierte Pins etwas einfacher macht, lösen Sie dieses Problem mit den Techniken, die Sie aus den vorherigen Antworten gelernt haben.

 var Gmap = new GMaps({ div: '#main-map', // FYI, this setting property used to be 'el'. It didn't need the '#' in older versions lat: 51.044308, lng: -114.0630914, zoom: 15 }); // To access the Native Google Maps object use the .map property if(Gmap.map) { // Disabling mouse wheel scroll zooming Gmap.map.setOptions({ scrollwheel: false }); } 

Ich habe ein besser entwickeltes jQuery-Plugin erstellt, mit dem Sie die Karte mit einem netten Knopf sperren oder entsperren können.

Dieses Plugin deaktiviert den Google Maps iframe mit einem transparenten Overlay div und fügt eine Schaltfläche für unlockit hinzu. Sie müssen für 650 Millisekunden drücken, um es zu entsperren.

Sie können alle Optionen für Ihre Bequemlichkeit ändern. Überprüfen Sie es unter https://github.com/diazemiliano/googlemaps-scrollprevent

Hier ist ein Beispiel.

 (function() { $(function() { $("#btn-start").click(function() { $("iframe[src*='google.com/maps']").scrollprevent({ printLog: true }).start(); return $("#btn-stop").click(function() { return $("iframe[src*='google.com/maps']").scrollprevent().stop(); }); }); return $("#btn-start").trigger("click"); }); }).call(this); 
 .embed-container { position: relative !important; padding-bottom: 56.25% !important; height: 0 !important; overflow: hidden !important; max-width: 100% !important; } .embed-container iframe { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; } .mapscroll-wrap { position: static !important; } 
   

"Start Scroll Prevent" "Stop Scroll Prevent"

Ab sofort (Oktober 2017) hat Google eine spezielle Eigenschaft implementiert, um das Zoomen / Scrollen zu unterstützen, genannt gestureHandling . Sein Zweck ist es, den Betrieb mobiler Geräte zu handhaben, aber es ändert auch das Verhalten für Desktop-Browser. Hier ist es aus der offiziellen 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 das Gestenhandling sind:

  • 'greedy' : Die Karte schwenkt immer nach oben oder unten, links oder rechts, wenn der Benutzer den Bildschirm wischt (schleppt). Mit anderen Worten, sowohl ein Ein-Finger-Swipe als auch ein Zwei-Finger-Swipe bewirken, dass die Karte schwenkt.
  • 'cooperative' : Der Benutzer muss mit einem Finger streichen, um die Seite zu scrollen, und mit zwei Fingern, um die Karte zu verschieben. Wenn der Benutzer die Karte mit einem Finger wischt, wird auf der Karte eine Überlagerung angezeigt, und der Benutzer wird aufgefordert, zwei Finger zu verwenden, um die Karte zu verschieben. Bei Desktop-Anwendungen können Benutzer die Karte zoomen oder schwenken, indem sie bei gedrückter Umschalttaste (Strg oder ⌘) blättern.
  • 'none' : Diese Option deaktiviert das Schwenken und Quetschen auf der Karte für mobile Geräte 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 'cooperative' GestenHand 'cooperative' auf 'cooperative' oder 'greedy'

Kurz gesagt, Sie können die Einstellung leicht auf “immer zoombar” ( 'greedy' ), “niemals zoombar” ( 'none' ) oder “Benutzer muss CRTL / ⌘ drücken, um den Zoom zu aktivieren” ( 'cooperative' ) erzwingen.

Für jemanden, der sich fragt, wie man die Javascript Google Map API deaktiviert

Es aktiviert den Zoom-Scroll, wenn Sie einmal auf die Karte klicken. Und deaktivieren Sie nach dem Verlassen der Maus die div.

Hier ist ein Beispiel

 var map; var element = document.getElementById('map-canvas'); function initMaps() { map = new google.maps.Map(element , { zoom: 17, scrollwheel: false, center: { lat: parseFloat(-33.915916), lng: parseFloat(151.147159) }, }); } //START IMPORTANT part //disable scrolling on a map (smoother UX) jQuery('.map-container').on("mouseleave", function(){ map.setOptions({ scrollwheel: false }); }); jQuery('.map-container').on("mousedown", function() { map.setOptions({ scrollwheel: true }); }); //END IMPORTANT part 
 .big-placeholder { background-color: #1da261; height: 300px; } 
    

Sie müssen nur Kartenoptionen hinzufügen:

 scrollwheel: false 

Nur wenn jemand interessiert ist an einer reinen css-Lösung dafür. Der folgende Code überlagert ein transparentes Div über die Map und verschiebt das transparente Div hinter der Map, wenn darauf geklickt wird. Die Überlagerung verhindert das Zoomen, sobald sie angeklickt wird und hinter der Karte ist das Zoomen aktiviert.

Sehen Sie meinen Blog post Google maps toggle mit CSS für eine Erklärung, wie es funktioniert, und Stift codepen.io/daveybrown/pen/yVryMr für eine funktionierende Demo.

Haftungsausschluss: Dies ist hauptsächlich für das Lernen und wird wahrscheinlich nicht die beste Lösung für die Produktion von Websites sein.

HTML:

 

CSS:

 .map-wrap { position: relative; overflow: hidden; height: 180px; margin-bottom: 10px; } #map-input { opacity: 0; } .map-overlay { display: block; content: ''; position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; overflow: hidden; z-index: 2; } #map-input[type=checkbox]:checked ~ iframe { z-index: 3; } #map-input[type=checkbox]:checked ~ .map-overlay { position: fixed; top: 0; left: 0; width: 100% !important; height: 100% !important; } iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; z-index: 1; border: none; } 

Eine einfache Lösung:

 // DISABLE MOUSE SCROLL IN MAPS // enable the pointer events only on click; $('.gmap-wrapper').on('click', function () { $('.gmap-wrapper iframe').removeClass('scrolloff'); // set the pointer events true on click }); // you want to disable pointer events when the mouse leave the canvas area; $(".gmap-wrapper").mouseleave(function () { $('.gmap-wrapper iframe').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area }); 
 .scrolloff{ pointer-events: none; } 
   

Verwenden Sie diesen Code, mit dem Sie die gesamte Farbe und Zoom-Kontrolle von Google Maps erhalten. ( scaleControl: false und scrollwheel: false verhindert, dass das Mausrad vergrößert oder verkleinert wird)

 function initMap() { // Styles a map in night mode. var map = new google.maps.Map(document.getElementById('map'), { center: {lat: 23.684994, lng: 90.356331}, zoom: 8, scaleControl: false, scrollwheel: false, styles: [ {elementType: 'geometry', stylers: [{color: 'F1F2EC'}]}, {elementType: 'labels.text.stroke', stylers: [{color: '877F74'}]}, {elementType: 'labels.text.fill', stylers: [{color: '877F74'}]}, { featureType: 'administrative.locality', elementType: 'labels.text.fill', stylers: [{color: '#d59563'}] }, { featureType: 'poi', elementType: 'labels.text.fill', stylers: [{color: '#d59563'}] }, { featureType: 'poi.park', elementType: 'geometry', stylers: [{color: '#263c3f'}] }, { featureType: 'poi.park', elementType: 'labels.text.fill', stylers: [{color: '#f77c2b'}] }, { featureType: 'road', elementType: 'geometry', stylers: [{color: 'F5DAA6'}] }, { featureType: 'road', elementType: 'geometry.stroke', stylers: [{color: '#212a37'}] }, { featureType: 'road', elementType: 'labels.text.fill', stylers: [{color: '#f77c2b'}] }, { featureType: 'road.highway', elementType: 'geometry', stylers: [{color: '#746855'}] }, { featureType: 'road.highway', elementType: 'geometry.stroke', stylers: [{color: 'F5DAA6'}] }, { featureType: 'road.highway', elementType: 'labels.text.fill', stylers: [{color: 'F5DAA6'}] }, { featureType: 'transit', elementType: 'geometry', stylers: [{color: '#2f3948'}] }, { featureType: 'transit.station', elementType: 'labels.text.fill', stylers: [{color: '#f77c2b3'}] }, { featureType: 'water', elementType: 'geometry', stylers: [{color: '#0676b6'}] }, { featureType: 'water', elementType: 'labels.text.fill', stylers: [{color: '#515c6d'}] }, { featureType: 'water', elementType: 'labels.text.stroke', stylers: [{color: '#17263c'}] } ] }); var marker = new google.maps.Marker({ position: {lat: 23.684994, lng: 90.356331}, map: map, title: 'BANGLADESH' }); } 

Ich mache es mit diesen einfachen Beispielen

jQuery

 $('.map').click(function(){ $(this).find('iframe').addClass('clicked') }).mouseleave(function(){ $(this).find('iframe').removeClass('clicked') }); 

CSS

 .map { width: 100%; } .map iframe { width: 100%; display: block; pointer-events: none; position: relative; /* IE needs a position other than static */ } .map iframe.clicked { pointer-events: auto; } 

Oder verwende die gmap-Optionen

 function init() { var mapOptions = { scrollwheel: false,