it-swarm.com.de

Deaktivieren der Mausradskalierung mit der Google Maps-API

Ich benutze Google Maps API (v3), um ein paar Karten auf einer Seite zu zeichnen. Ich möchte das Zoomen deaktivieren, wenn Sie mit dem Mausrad über die Karte fahren, bin mir aber nicht sicher, wie.

Ich habe scaleControl deaktiviert (d. H. 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
};
552
aaronrussell

In Version 3 der Maps-API können Sie einfach die Option scrollwheel in den Eigenschaften MapOptions 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 Zoomen von scrollwheel ist in Version 3 der Maps-API standardmäßig aktiviert, in Version 2 ist es jedoch deaktiviert, sofern es nicht explizit mit dem API-Aufruf enableScrollWheelZoom() aktiviert wurde.

979
Daniel Vassallo

Daniels Code erledigt den Job (danke!). Aber ich wollte das Zoomen komplett deaktivieren. Ich stellte fest, 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

103
Simon East

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 das Zoomen durch Scrollen wird in die Mitte gerückt, aber sobald man eine saubere Karte hat, ist diese Art des Zoomens gut.

30
Felipe Pereira

Halte es einfach! Ursprüngliche Google Maps-Variable, keine der Extras.

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

}
26
Creatif_IV

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 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 streicht (zieht). Mit anderen Worten, sowohl ein Wischen mit einem Finger als auch ein Wischen mit zwei Fingern bewirken, dass die Karte geschwenkt wird.
  • 'cooperative': Der Benutzer muss mit einem Finger über die Seite streichen und mit zwei Fingern die Karte verschieben. Wenn der Benutzer die Karte mit einem Finger überstreicht, wird auf der Karte eine Überlagerung angezeigt, die den Benutzer auffordert, die Karte mit zwei Fingern zu bewegen. In Desktop-Anwendungen können Benutzer die Karte durch Scrollen vergrößern oder verkleinern, während sie eine Änderungstaste (Strg- oder ⌘-Taste) drücken.
  • 'none': Diese Option deaktiviert das Schwenken und Kneifen auf der Karte für Mobilgeräte und das Ziehen der Karte auf Desktopgeräten.
  • 'auto' (Standard): Abhängig davon, ob die Seite scrollbar ist, legt die JavaScript-API von Google Maps die gestureHandling-Eigenschaft auf 'cooperative' oder 'greedy' fest.

Kurz gesagt, Sie können die Einstellung ganz einfach auf "Immer zoombar" ('greedy'), "Nie zoombar" ('none') oder "Benutzer muss CRTL/⌘ drücken, um Zoom zu aktivieren" ('cooperative') setzen.

8
Kar.ma

Ich habe ein weiterentwickeltes jQuery-Plugin erstellt, mit dem Sie die Karte mit einer Nizza-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 die Sperre aufzuheben.

Sie können alle Optionen nach Belieben ä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>
7
Emiliano Díaz

Nur für den Fall, dass Sie die Bibliothek GMaps.js verwenden, die das Ausführen von Aufgaben wie Geokodierung und benutzerdefinierten Stecknadeln ein wenig vereinfacht. Hier erfahren Sie, wie Sie dieses Problem mithilfe der Techniken lösen, 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 });
}
6
racl101

In meinem Fall war es entscheidend, _'scrollwheel':false_ in init zu setzen. Hinweis: Ich verwende jQuery UI Map . Unten ist meine Überschrift CoffeeScript init:

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

Sie müssen lediglich Kartenoptionen hinzufügen:

scrollwheel: false
4
Kiran Kanzar

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

Es wird aktivieren der Zoom-Scroll, wenn Sie einmal auf die Karte klicken. Und deaktivieren nach dem Verlassen der 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;
}
<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>
4
AlbertSamuel

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

3
Darme

Nur falls jemand Interesse an einer reinen CSS-Lösung dafür hat. Der folgende Code überlagert die Karte mit einem transparenten Bereich und verschiebt den transparenten Bereich hinter die Karte, wenn darauf geklickt wird. Die Überlagerung verhindert das Zoomen, sobald Sie darauf geklickt haben, und hinter der Karte ist das Zoomen aktiviert.

In meinem Blogbeitrag Google Maps zeigt css , wie es funktioniert, und pen codepen.io/daveybrown/pen/yVryMr , um eine funktionierende Demo anzuzeigen.

Haftungsausschluss: Dies ist hauptsächlich zum Lernen gedacht und wird wahrscheinlich nicht die beste Lösung für Produktionswebsites sein.

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;
}
2
Davey

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 benutze die gmap Optionen

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

Verwenden Sie den 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'
            });
          }
0
Chamon Roy