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

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



Я отключил scaleControl (т. е. удалил элемент scaling 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

};
756   14  

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();

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

966  
2014-10-09 20:53:07

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

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

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

100  
2017-05-23 13:31:37

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

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

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

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

29  
2016-12-14 19:21:34

держите его просто! Оригинальная переменная Google maps, ни один из дополнительных вещей.

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

}
26  
2015-03-02 22:33:32

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

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

на всякий случай, вы используете 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  
2016-12-14 19:23:23

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

на данный момент (октябрь 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  
2017-10-10 18:24:21

для кого-то интересно, Как отключить 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  
2017-05-10 08:40:27

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

scrollwheel: false
4  
2017-06-29 21:26:10

просто упаковать кто-нибудь заинтересован в чистом решении 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  
2017-02-01 23:27:56

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

// 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  
2017-06-08 21:56:31

используйте этот кусок кода, который даст вам весь цвет и масштабирование управления 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  
2017-06-18 15:12:53

Я делаю это с помощью этого простого экзамена

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  
2017-06-22 16:20:00

Comments

    Ничего не найдено.
Click here to cancel reply.