Как отключить масштабирование колесика прокрутки мыши с помощью Google Maps API

Я использую Google Maps API (v3), чтобы нарисовать несколько карт на странице. Одна вещь, которую я хотел бы сделать, это отключить масштабирование при прокрутке колеса мыши по карте, но я не уверен, как.

Я отключил scaleControl (т. е. удалил элемент масштабирования UI), но это не предотвращает масштабирование колеса прокрутки.

вот часть моей функции (это простой плагин 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
};
543
google-maps google-maps-api-3 jquery jquery-plugins

14 ответов

в версии 3 API Карт вы можете просто установить scrollwheel опция false в MapOptions свойства:

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

если бы вы использовали версию 2 API Карт, вам пришлось бы использовать disableScrollWheelZoom () вызов API следующим образом:

map.disableScrollWheelZoom();

на scrollwheel масштабирование включено по умолчанию в версии 3 API карт, но в версии 2 оно отключено, если явно не включено с помощью enableScrollWheelZoom() вызов API.

966

Дэниел код делает работу (спасибо кучу!). Но я хотел полностью отключить масштабирование. Я обнаружил, что мне пришлось использовать все четыре из этих вариантов:

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

посмотреть: спецификация объекта MapOptions

100

на всякий случай, если вы хотите сделать это динамически;

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

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

иногда вам нужно показать что-то" сложное " над картой (или карта является небольшой частью макета), и это масштабирование прокрутки попадает в середину, но как только у вас есть чистая карта, этот способ масштабирования хорош.

29

сохранить его простым! Оригинальная переменная Google maps, ничего лишнего.

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

}
26

в моем случае решающим было установить 'scrollwheel':false в init. Обратите внимание: я использую jQuery UI Map. Ниже мой CoffeeScript заголовок функции init:

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

на всякий случай, вы используете gmaps, достаточно.js библиотека, что делает его немного проще делать такие вещи, как геокодирование и пользовательские контакты, вот как вы решаете эту проблему, используя методы, извлеченные из предыдущих ответов.

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

Я создал более развитый плагин jQuery, который позволяет заблокировать или разблокировать карту с помощью хорошей кнопки.

этот плагин отключает iframe Google Maps с прозрачным наложением div и добавляет кнопку для разблокировки. Вы должны нажать на 650 миллисекунд, чтобы разблокировать его.

вы можете изменить все варианты для вашего удобства. Проверьте это наhttps://github.com/diazemiliano/googlemaps-scrollprevent

вот образец.

(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>
6

на данный момент (октябрь 2017) Google реализовал конкретное свойство для обработки масштабирования / прокрутки, называемое gestureHandling. Его цель-обрабатывать работу мобильных устройств, но он также изменяет поведение для настольных браузеров. Вот она от официальная документация:

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

доступные значения для gestureHandling:

  • 'greedy': карта всегда панорамирует (вверх или вниз, влево или вправо), когда пользователь пойло (тянется) экран. Другими словами, как один палец, так и два пальца заставляют карту панорамироваться.
  • 'cooperative': пользователь должен провести одним пальцем, чтобы прокрутить страницу и два пальца, чтобы панорамировать карту. Если пользователь проводит по карте одним пальцем, на карте появляется наложение с приглашением использовать два пальца для перемещения карты. В настольных приложениях пользователи могут масштабировать или панорамировать карту путем прокрутки при нажатии клавиши-модификатора (ctrl или ⌘ ключевой.)
  • 'none': этот параметр отключает панорамирование и сжатие карты для мобильных устройств, а также перетаскивание карты на настольных устройствах.
  • 'auto' (по умолчанию): в зависимости от того, прокручивается ли страница, Google Maps JavaScript API устанавливает свойство gestureHandling либо 'cooperative' или 'greedy'

короче говоря, вы можете легко заставить параметр "всегда масштабируемый" ('greedy'), "никогда не масштабируется" ('none'), или "пользователь должен нажмите CRTL/⌘, чтобы включить масштабирование" ('cooperative').

6

для кого-то интересно, Как отключить Javascript Google Map API

Это включить прокрутка масштабирования, если щелкнуть карту один раз. И отключить после выхода мыши из div.

вот пример 

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

вам просто нужно добавить в параметры карты:

scrollwheel: false
4

просто incase кто-нибудь заинтересован в чистом решении css для этого. Следующий код накладывает прозрачный div на карту и перемещает прозрачный div позади карты при нажатии. Наложение предотвращает масштабирование, после нажатия, а за картой масштабирование включено.

см. мой пост в блоге Google maps переключить масштабирование с помощью css для объяснения, как это работает, и ручка codepen.io / daveybrown / pen / yVryMr для работы демонстрация.

отказ от ответственности: это в основном для обучения и, вероятно, не будет лучшим решением для производственных сайтов.

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

простое решение:

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

источник:https://github.com/Corsidia/scrolloff

2

используйте этот кусок кода, который даст вам все цвета и масштабирование управления Google map. (scaleControl: false и колесо прокрутки: false предотвратит масштабирование колесика мыши вверх или вниз)

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

Я делаю это с помощью этого простого 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;
}

или используйте параметры gmap

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