So deaktivieren Sie die Mausradskalierung mit der Google Maps-API

560

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
};
Aaronrussell
quelle
1
Hallo, ich habe ein weiterentwickeltes Plugin erstellt, mit dem Sie die Karte mit einem schönen Button sperren oder entsperren können. Ist auch jQuery Plugin. Sie können es unter github.com/diazemiliano/googlemaps-scrollprevent überprüfen. Ich hoffe, es gefällt Ihnen.
Emiliano Díaz
Vorgestellt in Developers Writing the Future von Joel Spolsky (CEO und Mitbegründer von Stack Overflow) , von 17 Minuten, 09 Sekunden - 18 Minuten, 25 Sekunden (07.12.2016).
Peter Mortensen

Antworten:

986

In Version 3 der Maps-API können Sie die scrollwheelOption in den 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 Maps-API verwendet hätten, müssten Sie den API-Aufruf disableScrollWheelZoom () wie folgt verwenden:

map.disableScrollWheelZoom();

Das scrollwheelZoomen ist in Version 3 der Maps-API standardmäßig aktiviert, in Version 2 jedoch deaktiviert, sofern es nicht ausdrücklich mit dem enableScrollWheelZoom()API-Aufruf aktiviert wurde .

Daniel Vassallo
quelle
40
+1 FYI: disableDefaultUI: truekann ersetzennavigationControl: false, mapTypeControl: false, scaleControl: false
Jordan Arseno
1
Ein Problem für mich war, dass die anderen Parameter ignoriert werden, wenn Sie die mapTypeId nicht haben.
Michael Hunter
Dies funktioniert bei mir, hat aber den seltsamen Nebeneffekt, dass das Scrollrad in einem Modal auf der Seite deaktiviert wird. Der modale Inhalt enthält keine Karte und der Cursor befindet sich nicht über der Karte.
Regularmike
Leider funktioniert dies mit StreetViewPanorama Map nicht wie erwartet, da das Einfügen eines Scrollrads: false den Scroll-Zoom deaktiviert, aber auch das Scrollen der Seite deaktiviert, da die Scrolle immer noch irgendwie erfasst wird.
Solomon Closson
Daniel, können Sie mir bitte bei der Beantwortung dieser Frage helfen stackoverflow.com/questions/60544486/…
Xavier Issac
103

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:

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

Siehe: MapOptions-Objektspezifikation

Simon East
quelle
2
Funktioniert das noch für Sie? Ich konnte die aktuelle Version von Version 3 (ich glaube die Version 3.9) nicht dazu bringen, das Scrollrad zu ignorieren, und musste alle untergeordneten Elemente des Kartenobjekts durchlaufen und die Weitergabe in die Karte stoppen.
c.apolzon
Ja, arbeitet für mich, danke! Wenn Sie alle Standard-Widgets für die Kartensteuerung entfernen möchten, deaktivieren Sie einfachDefaultUI: true, anstatt die Steuerelemente zum Zoomen, Drehen und Schwenken einzeln zu deaktivieren.
Thomax
33
Vorsicht vor Kapitalisierung; scrollwheelmuss nur in Kleinbuchstaben geschrieben sein (hat mich nur durch die Aufwertung des W erwischt)
kez
1
Scrollrad: falsch war alles was ich brauchte
mindore
30

Nur für den Fall, dass Sie dies dynamisch tun 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 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.

Felipe Pereira
quelle
3
Sie können diesen Code bei der Initialisierung hinzufügen: map.addListener ('click', function () {if (map) map.setOptions ({scrollwheel: true});}); map.addListener ('mouseout', function () {if (map) map.setOptions ({scrollwheel: false});});
Raumfahrer
Dies funktioniert für mich, da ich die Map Scrollwheel-Funktion außerhalb des Google Maps-Codes abfragen wollte. dh aus meinem eigenen jquery-Code.
lharby
26

Halte es einfach! Ursprüngliche Google Maps-Variable, keines der zusätzlichen Dinge.

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

}
Creatif_IV
quelle
10

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 :

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 ein Ein-Finger-Wisch als auch ein Zwei-Finger-Wisch bewirken, dass die Karte schwenkt.
  • 'cooperative': Der Benutzer muss mit einem Finger über die Seite wischen und mit zwei Fingern über die Karte schwenken. Wenn der Benutzer die Karte mit einem Finger wischt, wird auf der Karte eine Überlagerung angezeigt, in der er aufgefordert wird, die Karte mit zwei Fingern zu verschieben. In Desktop-Anwendungen können Benutzer die Karte durch Scrollen zoomen oder schwenken, während sie eine Modifizierertaste (Strg- oder ⌘-Taste) drücken.
  • 'none': Diese Option deaktiviert das Schwenken und Kneifen auf der Karte für mobile Geräte und das Ziehen der Karte auf Desktop-Geräten.
  • 'auto'(Standard): Abhängig davon, ob die Seite scrollbar ist, setzt die Google Maps JavaScript-API die Eigenschaft gestureHandling auf entweder 'cooperative'oder'greedy'

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 .

Karma
quelle
7

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.

(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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/diazemiliano/googlemaps-scrollprevent/v.0.6.5/dist/googlemaps-scrollprevent.min.js"></script>
<div class="embed-container">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12087.746318586604!2d-71.64614110000001!3d-40.76341959999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9610bf42e48faa93%3A0x205ebc786470b636!2sVilla+la+Angostura%2C+Neuqu%C3%A9n!5e0!3m2!1ses-419!2sar!4v1425058155802"
  width="400" height="300" frameborder="0" style="border:0"></iframe>
</div>
<p><a id="btn-start" href="#">"Start Scroll Prevent"</a>  <a id="btn-stop" href="#">"Stop Scroll Prevent"</a>
</p>

Emiliano Díaz
quelle
Nettes Plugin, aber wie kann man es verwenden, wenn man die Google Map mit der JS-API erstellt, anstatt einen Iframe zu verwenden?
Ikkez
2
Ist " Edit in JSFiddle Result JavaScript HTML CSS" wirklich Teil des Codes?
Peter Mortensen
6

In meinem Fall war es entscheidend, 'scrollwheel':falsein init zu setzen. Hinweis: Ich benutze jQuery UI Map. Unten ist meine Überschrift der CoffeeScript- Init-Funktion:

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

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.

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 });
}
racl101
quelle
4

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

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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <body>
      <div class="big-placeholder">
      </div>
      
      
      <!-- START IMPORTANT part -->
      <div class="map-container">
        <div id="map-canvas" style="min-height: 400px;"></div>  
      </div>
      <!-- END IMPORTANT part-->
      
      
      
      <div class="big-placeholder">
      </div>
      <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAIjN23OujC_NdFfvX4_AuoGBbkx7aHMf0&callback=initMaps">
      </script>
  </body>
</html>

AlbertSamuel
quelle
4

Sie müssen nur die Kartenoptionen hinzufügen:

scrollwheel: false
Kiran Kanzar
quelle
3

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; }
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="gmap-wrapper">
<iframe class="scrolloff" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d44754.55736493158!2d9.151166379101554!3d45.486726!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4786bfca7e8fb1cb%3A0xee8d99c9d153be98!2sCorsidia!5e0!3m2!1sit!2sit!4v1496947992608" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</html>

Quelle: https://github.com/Corsidia/scrolloff

Darme
quelle
2

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:

<div class="map-wrap small-11 medium-8 small-centered columns">
    <input id="map-input" type="checkbox" />
    <label class="map-overlay" for="map-input" class="label" onclick=""></label>
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d19867.208601651986!2d-0.17101002911118332!3d51.50585742500925!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2suk!4v1482355389969"></iframe>
</div>

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;
}
Davey
quelle
0

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.)

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

Chamon Roy
quelle
Während dieser Code die Frage möglicherweise beantwortet, würde die Bereitstellung eines zusätzlichen Kontexts darüber, wie und / oder warum das Problem gelöst wird, den langfristigen Wert der Antwort verbessern. Bitte lesen Sie diese Anleitung, um eine qualitativ hochwertige Antwort zu erhalten.
thewaywewere
0

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 verwenden Sie die gmap-Optionen

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