Jak wyłączyć skalowanie kółka myszy za pomocą interfejsu API Map Google

560

Korzystam z Google Maps API (v3), aby narysować kilka map na stronie. Jedną z rzeczy, które chciałbym zrobić, jest wyłączenie powiększania po przewinięciu kółka myszy nad mapą, ale nie jestem pewien, jak to zrobić.

Wyłączyłem funkcję scaleControl (tj. Usunąłem element interfejsu skalowania), ale nie zapobiega to skalowaniu kółka przewijania.

Oto część mojej funkcji (jest to prosta wtyczka jQuery):

$.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
źródło
1
Cześć. Stworzyłem bardziej rozwiniętą wtyczkę, która pozwala zablokować lub odblokować mapę za pomocą ładnego przycisku. Jest także wtyczka jQuery. Możesz to sprawdzić na github.com/diazemiliano/googlemaps-scrollprevent Mam nadzieję, że ci się spodoba.
Emiliano Díaz
Wyróżniony w Developers Writing the Future autorstwa Joela Spolsky'ego (CEO i współzałożyciela Stack Overflow) , od 17 min. 09 sek. - 18 min. 25 sek. (07.12.2016).
Peter Mortensen

Odpowiedzi:

986

W wersji 3 interfejsu API Map Google możesz po prostu ustawić scrollwheelopcję false w właściwościach MapOptions :

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

Jeśli korzystasz z wersji 2 interfejsu API Maps, musiałbyś użyć wywołania API disableScrollWheelZoom () w następujący sposób:

map.disableScrollWheelZoom();

scrollwheelZoom jest domyślnie włączona w wersji 3 API Maps, ale w wersji 2 jest wyłączona, chyba że wyraźnie włączony z enableScrollWheelZoom()wywołania API.

Daniel Vassallo
źródło
40
+1 do FYI: disableDefaultUI: truemoże zastąpićnavigationControl: false, mapTypeControl: false, scaleControl: false
Jordan Arseno
1
Dla mnie problemem było to, że jeśli nie masz mapTypeId, pozostałe parametry są ignorowane.
Michael Hunter
To działa dla mnie, ale ma dziwny efekt uboczny polegający na wyłączeniu kółka przewijania wewnątrz modalu na stronie. W treści modalnej nie ma mapy, a kursor nie znajduje się nad mapą.
regularmike
Niestety, nie działa to zgodnie z oczekiwaniami w StreetViewPanorama Map, ponieważ umieszczenie kółka przewijania: false, wyłącza przewijanie powiększenia, ale także wyłącza przewijanie strony, ponieważ jakoś chwyta przewijanie.
Solomon Closson
Daniel, czy możesz mi pomóc w odpowiedzi na to pytanie stackoverflow.com/questions/60544486/…
Xavier Issac
103

Kod Daniela spełnia swoje zadanie (wielkie dzięki!). Ale chciałem całkowicie wyłączyć powiększanie. Odkryłem, że musiałem użyć wszystkich czterech z tych opcji:

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

Zobacz: Specyfikacja obiektu MapOptions

Simon East
źródło
2
Czy to nadal działa dla Ciebie? Nie udało mi się uzyskać aktualnej wersji v3 (wydaje mi się, że to 3.9), aby zignorować kółko przewijania, i musiałem uciekać się do zapętlania wszystkich elementów podrzędnych obiektu mapy i zatrzymywania propagacji do mapy.
c.apolzon
Tak, działa dla mnie, dzięki! Ponadto, jeśli chcesz usunąć wszystkie domyślne widżety sterowania mapami, po prostu wyłącz opcję Domyślny interfejs użytkownika: prawda zamiast wyłączać indywidualnie powiększanie, obracanie i przesuwanie elementów sterujących.
thomax
33
Uwaga na wielkie litery; scrollwheelmusi być napisane małymi literami (po prostu złapałem mnie, podnosząc W)
kez
1
kółko przewijania
30

Na wypadek, gdybyś chciał to zrobić dynamicznie;

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

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

Czasami musisz pokazać coś „złożonego” na mapie (lub mapa jest niewielką częścią układu), a to powiększanie przewijania znajduje się w środku, ale gdy masz czystą mapę, ten sposób powiększania jest przyjemny.

Felipe Pereira
źródło
3
Możesz dodać ten kod przy inicjalizacji: map.addListener ('click', function () {if (map) map.setOptions ({scrollwheel: true});}); map.addListener ('mouseout', function () {if (map) map.setOptions ({scrollwheel: false});});
Spaceman
Działa to dla mnie, ponieważ chciałem przesłuchać funkcję kółka przewijania mapy poza kodem map Google. tj. z mojego własnego kodu jquery.
lharby
26

Nie komplikuj! Oryginalna zmienna map Google, żadnych dodatkowych rzeczy.

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

}
Creatif_IV
źródło
10

Na dzień dzisiejszy (październik 2017 r.) Google wdrożył specjalną właściwość do obsługi powiększania / przewijania, zwaną gestureHandling. Jego celem jest obsługa działania urządzeń mobilnych, ale modyfikuje również zachowanie przeglądarek stacjonarnych. Oto z oficjalnej dokumentacji :

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

Dostępne wartości dla gestHandling to:

  • 'greedy': Mapa zawsze przesuwa się (w górę lub w dół, w lewo lub w prawo), gdy użytkownik przesuwa (przeciąga) ekran. Innymi słowy, przesunięcie jednym palcem i przesunięcie dwoma palcami powoduje przesuwanie mapy.
  • 'cooperative': Użytkownik musi przesunąć jednym palcem, aby przewinąć stronę, i dwoma palcami, aby przesunąć mapę. Jeśli użytkownik przesunie mapę jednym palcem, na mapie pojawi się nakładka z monitem informującym użytkownika o przesunięciu mapy dwoma palcami. W aplikacjach komputerowych użytkownicy mogą powiększać lub przesuwać mapę, przewijając i naciskając klawisz modyfikujący (klawisz Ctrl lub ⌘).
  • 'none': Ta opcja wyłącza przesuwanie i szczypanie mapy na urządzeniach mobilnych oraz przeciąganie mapy na urządzeniach stacjonarnych.
  • 'auto'(domyślnie): W zależności od tego, czy strona jest przewijana, API Google Maps JavaScript ustawia właściwość gestureHandling albo 'cooperative'albo'greedy'

Krótko mówiąc, możesz łatwo zmusić ustawienie do „zawsze powiększania” ( 'greedy'), „nigdy 'none'powiększania” ( 'cooperative') lub „użytkownik musi nacisnąć CRTL / ⌘, aby włączyć zoom” ( ).

Kar.ma
źródło
7

Stworzyłem bardziej rozwiniętą wtyczkę jQuery, która pozwala zablokować lub odblokować mapę za pomocą ładnego przycisku.

Ta wtyczka wyłącza ramkę iframe Google Maps z przezroczystym div div nakładki i dodaje przycisk odblokowania. Musisz nacisnąć przez 650 milisekund, aby go odblokować.

Możesz zmienić wszystkie opcje dla swojej wygody. Sprawdź to na https://github.com/diazemiliano/googlemaps-scrollprevent

Oto przykład.

(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
źródło
fajna wtyczka, ale jak jej używać, gdy tworzysz mapę google z JS API zamiast korzystania z iframe?
ikkez
2
Czy „ Edit in JSFiddle Result JavaScript HTML CSS” jest naprawdę częścią kodu?
Peter Mortensen
6

W moim przypadku kluczowe było 'scrollwheel':falsezainicjowanie init. Uwaga: używam jQuery UI Map. Poniżej znajduje się nagłówek mojej funkcji inicjującej CoffeeScript :

 $("#map_canvas").gmap({'scrollwheel':false}).bind "init", (evt, map) ->
andilabs
źródło
6

Na wszelki wypadek korzystasz z biblioteki GMaps.js , co sprawia, że ​​nieco łatwiej jest robić takie rzeczy jak Geokodowanie i niestandardowe piny, oto jak rozwiązać ten problem, korzystając z technik wyuczonych z poprzednich odpowiedzi.

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
źródło
4

Dla kogoś, kto zastanawia się, jak wyłączyć JavaScript Google Maps API

Będzie ona umożliwić zwój powiększanie jeśli klikniesz mapę raz. I wyłącz po wyjściu z div div myszy.

Oto przykład

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
źródło
4

Musisz tylko dodać w opcjach mapy:

scrollwheel: false
Kiran Kanzar
źródło
3

Proste rozwiązanie:

// 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>

Źródło: https://github.com/Corsidia/scrolloff

Darme
źródło
2

Wystarczy, że ktokolwiek jest zainteresowany czystym rozwiązaniem css do tego. Poniższy kod nakłada przezroczysty div na mapę i po kliknięciu przesuwa przezroczysty div za mapę. Nakładka zapobiega powiększaniu, po kliknięciu, a za mapą włączane jest powiększanie.

Zobacz mój wpis na blogu Mapy Google przełączają zoom za pomocą css, aby uzyskać wyjaśnienie, jak to działa, a pióro codepen.io/daveybrown/pen/yVryMr aby uzyskać działającą wersję demonstracyjną.

Oświadczenie: służy głównie do nauki i prawdopodobnie nie będzie najlepszym rozwiązaniem dla stron produkcyjnych.

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
źródło
0

Użyj tego fragmentu kodu, który da Ci pełną kontrolę nad kolorem i mapą Google. ( scaleControl: false i scrollwheel: false zapobiegnie powiększaniu lub zmniejszaniu kółka myszy)

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
źródło
Chociaż ten kod może odpowiedzieć na pytanie, zapewnienie dodatkowego kontekstu dotyczącego tego, jak i / lub dlaczego rozwiązuje problem, poprawiłoby długoterminową wartość odpowiedzi. Przeczytaj ten poradnik, aby uzyskać wysokiej jakości odpowiedź.
thewaywewere
0

Robię to z tymi prostymi przykładami

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

Lub użyj opcji gmap

function init() { 
    var mapOptions = {  
        scrollwheel: false, 
dimitar
źródło