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

528

Я использую 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
};
Теги:
google-maps
google-maps-api-3
jquery-plugins

14 ответов

1001
Лучший ответ

В версии 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-интерфейс

Поделиться
  • 0
    Отлично. Большое спасибо. Не уверен, как я пропустил это в документации по API, но большое спасибо.
  • 39
    +1 К вашему сведению: disableDefaultUI: true может заменить navigationControl: false, mapTypeControl: false, scaleControl: false
Показать ещё 6 комментариев
103

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

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

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

Поделиться
  • 2
    Это все еще работает для вас? Мне не удалось заставить текущую версию v3 (я полагаю, ее 3.9) игнорировать колесо прокрутки, и мне пришлось прибегнуть к циклическому прохождению всех дочерних объектов объекта карты и прекращению распространения на карту.
  • 0
    Да, у меня работает, спасибо! Кроме того, если вы хотите удалить все виджеты элемента управления картой по умолчанию, просто отключитеDefaultUI: true вместо отдельных элементов управления масштабированием, поворотом и панорамированием.
Показать ещё 3 комментария
27

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

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

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

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

Поделиться
  • 3
    Вы можете добавить этот код при инициализации: map.addListener ('click', function () {if (map) map.setOptions ({scrollwheel: true});}); map.addListener ('mouseout', function () {if (map) map.setOptions ({scrollwheel: false});});
  • 0
    Это работает для меня, так как я хотел опросить функцию прокрутки карты вне кода Google Maps. то есть из моего собственного кода JQuery.
26

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

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

}
Поделиться
5

Я создал более развитый плагин 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>
Поделиться
  • 0
    хороший плагин, но как его использовать, когда вы создаете карту Google с JS API вместо использования iframe?
  • 2
    Является ли « Edit in JSFiddle Result JavaScript HTML CSS » частью кода?
5

На всякий случай вы используете библиотеку 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 });
}
Поделиться
5

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

 $("#map_canvas").gmap({'scrollwheel':false}).bind "init", (evt, map) ->
Поделиться
2

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

scrollwheel: false
Поделиться
2

Для кого-то, кто задается вопросом, как отключить 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>
Поделиться
1

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

Поделиться
1

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

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

Поделиться
  • 0
    Здравствуйте @Darmenise, я хочу загрузить текущее местоположение или я пишу адрес и нахожу это местоположение на карте. Пожалуйста, помогите мне.
1

Просто, если кто-нибудь заинтересован в чистом решении 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;
}
Поделиться
0

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

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

Используйте этот фрагмент кода, который даст вам весь цвет и управление масштабированием карты 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'
            });
          }
Поделиться
  • 0
    Хотя этот код может ответить на вопрос, предоставление дополнительного контекста относительно того, как и / или почему он решает проблему, улучшит долгосрочную ценность ответа. Пожалуйста, прочитайте эту инструкцию для обеспечения качественного ответа.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню