Jak wyłączyć skalowanie kółek przewijania myszy za pomocą interfejsu Google Maps API

Kod Daniela wykonuje swoją pracę (dzięki Kupie!). Ale chciałem całkowicie wyłączyć powiększanie. Okazało się, że muszę użyć wszystkich czterech z tych opcji, aby to zrobić:

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

Zobacz: Specyfikacja obiektu MapOptions

Na wszelki 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 małą częścią układu), a to powiększanie przewijania staje się pośrodku, ale gdy masz czystą mapę, ten sposób powiększania jest ładny.

Keep it simple! Oryginalna zmienna Google maps, żadnych dodatkowych rzeczy.

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

}

W moim przypadku kluczową rzeczą było ustawienie 'scrollwheel':false w init. Uwaga: używamjQuery UI Map. Poniżej znajduje się mój CoffeeScript nagłówek funkcji init:

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

Na wszelki wypadek, używasz GMaps.biblioteka js , która nieco ułatwia robienie takich rzeczy, jak geokodowanie i niestandardowe piny, oto jak rozwiązujesz ten problem przy użyciu 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 });
}

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

Ta wtyczka wyłącza iframe Google Maps z przezroczystą nakładką div I dodaje przycisk do unlockit. Musisz nacisnąć 650 milisekund, aby go odblokować.

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

Oto kilka 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>

Od teraz (październik 2017) Google zaimplementowało specjalną właściwość do obsługi powiększania/przewijania, o nazwie gestureHandling. Jego celem jest obsługa działania urządzeń mobilnych, ale modyfikuje zachowanie również dla przeglądarek desktopowych. 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 gestureHandling to:

• 'greedy': mapa zawsze przesuwa się (w górę lub w dół, w lewo lub w prawo), gdy użytkownik przesuwa (przeciąga) ekran. W innych słowa, zarówno przesunięcie jednym palcem, jak i dwoma palcami powodują przesuwanie mapy.
• 'cooperative': Użytkownik musi przesuwać palcem, aby przewijać stronę i dwoma palcami, aby przesuwać 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 desktopowych użytkownicy mogą powiększać lub przesuwać mapę, przewijając jednocześnie klawisz modyfikujący (ctrl lub⌘).
• 'none': Ta opcja wyłącza panoramowanie i szczypanie na mapie dla urządzeń mobilnych i przeciąganie mapy na urządzeniach stacjonarnych.
• 'auto' (domyślnie): w zależności od tego, czy strona jest przewijalna, JavaScript API Map Google ustawia właściwość gestureHandling na 'cooperative' lub 'greedy'

W skrócie, można łatwo wymusić ustawienie "Zawsze zoomable" ('greedy'), "nigdy nie można powiększać" ('none'), lub "użytkownik musi nacisnąć CRTL/⌘, aby włączyć zoom" ('cooperative').

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

Włącza przewijanie powiększenia, jeśli klikniesz mapę raz. I Wyłącz po wyjściu myszy z div.

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>

Wystarczy dodać Opcje mapy:

scrollwheel: false

Po prostu okryj każdego, kto jest zainteresowany czystym rozwiązaniem css do tego. Poniższy kod nakłada przezroczysty div na mapę i przenosi przezroczysty div za mapę po kliknięciu. Nakładka zapobiega powiększaniu, po kliknięciu, a za mapą, powiększanie jest włączone.

Zobacz mój wpis na blogu Google maps toggle zoom with css dla wyjaśnienia, jak to działa, i pióro codepen.io/daveybrown/pen/yVryMr na działające demo.

Zastrzeżenie: jest to 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;
}

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

Użyj tego kawałka kodu, który zapewni Ci całą kontrolę koloru i powiększania Mapy google. (scaleControl: false i scrollwheel: false zapobiegnie powiększeniu kółka myszy w górę lub w dół)

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

I do it with this simple examps

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,