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

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

552 голосов
/ 25 февраля 2010

Я использую 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
};

Ответы [ 14 ]

979 голосов
/ 25 февраля 2010

В версии 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 оно отключено, если явно не включено с помощью вызова API enableScrollWheelZoom().

102 голосов
/ 28 июня 2011

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

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

См .: Спецификация объекта MapOptions

30 голосов
/ 18 сентября 2014

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

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

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

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

26 голосов
/ 21 октября 2014

Будьте проще! Исходная переменная Google maps, ничего лишнего. 

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

}
8 голосов
/ 10 октября 2017

На данный момент (октябрь 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'
});

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

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

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

7 голосов
/ 02 августа 2016

Я создал более развитый плагин 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 голосов
/ 20 октября 2015

На всякий случай вы используете библиотеку 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 голосов
/ 14 июля 2014

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

 $("#map_canvas").gmap({'scrollwheel':false}).bind "init", (evt, map) ->
4 голосов
/ 29 июня 2017

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

scrollwheel: false
4 голосов
/ 10 мая 2017

Для тех, кто интересуется, как отключить JavaScript API Google Map

Будет включать прокрутку масштабирования, если вы нажмете карту один раз. И отключите после того, как ваша мышь выйдет из 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>
Страница:
...