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

Я использую API Карт Google (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
};

ОТВЕТЫ

Ответ 1

В версии 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 Карт, вам пришлось бы использовать API-интерфейс

Ответ 2

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

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

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

Ответ 3

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

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

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

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

Ответ 4

Держите это просто! Исходная переменная Google maps, ничего лишнего.

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

}

Ответ 5

В моем случае решающее значение было установить в '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 });
}

Ответ 7

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

Ответ 8

Для кого-то, кто задается вопросом, как отключить API Google Карт Google

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

Ответ 9

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

scrollwheel: false

Ответ 10

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

Смотрите мой пост в блоге Google maps переключает масштаб с помощью css для объяснения, как это работает, и pen 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;
}

Ответ 11

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

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

Ответ 12

На данный момент (октябрь 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' (по умолчанию): в зависимости от того, прокручивается ли страница, API JavaScript для Google Maps устанавливает свойство gestureHandling как 'cooperative' или 'greedy'

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

Ответ 13

Используйте этот фрагмент кода, который даст вам весь цвет и управление масштабированием карты google. ( scaleControl: false и scrollwheel: 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'
            });
          }

Ответ 14

Я делаю это с помощью этих простых экзаменов

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,