Ich verwende die Google Maps-API (Version 3), um einige Karten auf einer Seite zu zeichnen. Eine Sache, die ich gerne tun würde, ist das Deaktivieren des Zooms, wenn Sie mit dem Mausrad über die Karte scrollen, aber ich bin mir nicht sicher, wie.
Ich habe scaleControl deaktiviert (dh das Skalierungs-UI-Element entfernt), dies verhindert jedoch nicht die Skalierung des Scrollrads.
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
};
jquery
google-maps
google-maps-api-3
jquery-plugins
Aaronrussell
quelle
quelle
Antworten:
In Version 3 der Maps-API können Sie die
scrollwheel
Option in den MapOptions- Eigenschaften einfach auf false setzen :Wenn Sie Version 2 der Maps-API verwendet hätten, müssten Sie den API-Aufruf disableScrollWheelZoom () wie folgt verwenden:
Das
scrollwheel
Zoomen ist in Version 3 der Maps-API standardmäßig aktiviert, in Version 2 jedoch deaktiviert, sofern es nicht ausdrücklich mit demenableScrollWheelZoom()
API-Aufruf aktiviert wurde .quelle
disableDefaultUI: true
kann ersetzennavigationControl: false, mapTypeControl: false, scaleControl: false
Daniels Code macht den Job (danke ein Haufen!). Aber ich wollte das Zoomen komplett deaktivieren. Ich stellte fest, dass ich alle vier Optionen verwenden musste, um dies zu tun:
Siehe: MapOptions-Objektspezifikation
quelle
scrollwheel
muss nur in Kleinbuchstaben geschrieben sein (hat mich nur durch die Aufwertung des W erwischt)Nur für den Fall, dass Sie dies dynamisch tun möchten;
Manchmal muss man etwas "Komplexes" über der Karte anzeigen (oder die Karte ist ein kleiner Teil des Layouts), und dieses Scroll-Zoomen wird in die Mitte verschoben, aber sobald Sie eine saubere Karte haben, ist diese Art des Zooms hilfreich.
quelle
Halte es einfach! Ursprüngliche Google Maps-Variable, keines der zusätzlichen Dinge.
quelle
Ab sofort (Oktober 2017) hat Google eine spezielle Eigenschaft für das Zoomen / Scrollen implementiert
gestureHandling
. Der Zweck besteht darin, den Betrieb mobiler Geräte zu handhaben, das Verhalten wird jedoch auch für Desktop-Browser geändert. Hier ist es aus der offiziellen Dokumentation :Kurz gesagt, Sie können die Einstellung leicht auf "immer zoombar" (
'greedy'
), "nie zoombar" ('none'
) oder "Benutzer muss CRTL / ⌘ drücken, um den Zoom zu aktivieren" ('cooperative'
) erzwingen .quelle
Ich habe ein weiterentwickeltes jQuery-Plugin erstellt, mit dem Sie die Karte mit einer schönen Schaltfläche sperren oder entsperren können.
Dieses Plugin deaktiviert den Google Maps-Iframe mit einem transparenten Overlay-Div und fügt eine Schaltfläche zum Entsperren hinzu. Sie müssen 650 Millisekunden lang 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.
quelle
Edit in JSFiddle Result JavaScript HTML CSS
" wirklich Teil des Codes?In meinem Fall war es entscheidend,
'scrollwheel':false
in init zu setzen. Hinweis: Ich benutzejQuery UI Map
. Unten ist meine Überschrift der CoffeeScript- Init-Funktion:quelle
Nur für den Fall, dass Sie die Bibliothek GMaps.js verwenden, wodurch es etwas einfacher ist, Dinge wie Geokodierung und benutzerdefinierte Pins auszuführen. So lösen Sie dieses Problem mithilfe der Techniken, die Sie aus den vorherigen Antworten gelernt haben.
quelle
Für jemanden, der sich fragt, wie man die Javascript Google Map API deaktiviert
Wenn Sie einmal auf die Karte klicken, wird der Zoom-Bildlauf aktiviert . Und deaktivieren Sie, nachdem Sie mit der Maus das div verlassen haben.
Hier ist ein Beispiel
quelle
Sie müssen nur die Kartenoptionen hinzufügen:
quelle
Eine einfache Lösung:
Quelle: https://github.com/Corsidia/scrolloff
quelle
Nur für den Fall, dass jemand an einer reinen CSS-Lösung interessiert ist. Der folgende Code überlagert ein transparentes Div über der Karte und verschiebt das transparente Div hinter die Karte, wenn darauf geklickt wird. Die Überlagerung verhindert das Zoomen, sobald Sie darauf klicken, und hinter der Karte ist das Zoomen aktiviert.
In meinem Blogbeitrag Google Maps zum Umschalten des Zooms mit CSS finden Sie eine Erklärung der Funktionsweise sowie den Stift codepen.io/daveybrown/pen/yVryMr Eine funktionierende Demo finden .
Haftungsausschluss: Dies dient hauptsächlich dem Lernen und ist wahrscheinlich nicht die beste Lösung für Produktionswebsites.
HTML:
CSS:
quelle
Verwenden Sie diesen Code, mit dem Sie die gesamte Farb- und Zoomsteuerung von Google Map erhalten. ( scaleControl: false und scrollwheel: false verhindern, dass das Mausrad nach oben oder unten zoomt.)
quelle
Ich mache es mit diesen einfachen Beispielen
jQuery
CSS
Oder verwenden Sie die gmap-Optionen
quelle