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

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

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.

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

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.

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

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

}

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

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>

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

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

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>

Musisz tylko dodać w opcjach mapy:

scrollwheel: false

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

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

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

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,