Як відключити масштабування колеса прокрутки миші за допомогою API Карт Google

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

Я відключив scaleControl (тобто видалив елемент інтерфейсу масштабування), але це не запобігає масштабуванню колеса прокрутки.

Ось частина моєї функції (це простий плагін 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
};

У версії 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 Карт, вам довелося б скористатись викликом APISQLShellZoom () таким чином:

map.disableScrollWheelZoom();

scrollwheelЗміна масштабу за замовчуванням включена у версії 3 API Карт, але у версії 2 він відключений , якщо явно не включений з enableScrollWheelZoom()викликом API.

Код Даніеля виконує цю роботу (дякую купу!). Але я хотів повністю відключити масштабування. Я виявив, що для цього потрібно використовувати всі чотири наступні варіанти:

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

Див.: Специфікація об'єкта MapOptions

На всякий випадок, якщо ви хочете зробити це динамічно;

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

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

Іноді доводиться показувати щось «складне» над картою (або карта є невеликою частиною макета), і це масштабування сувій стає посередині, але коли у вас є чиста карта, цей спосіб масштабування приємний.

Не ускладнювати! Оригінальна змінна карта Google, жоден із зайвих матеріалів.

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

}

На сьогодні (жовтень 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'
});

Доступні значення для керування рухом:

• 'greedy': Карта завжди переміщується (вгору або вниз, вліво або вправо), коли користувач провела пальцем по екрану. Іншими словами, як проведіть пальцем одним пальцем, так і проведіть двома пальцями, карта спричинить панорамування.
• 'cooperative': Користувач повинен провести пальцем одним пальцем для прокрутки сторінки та двома пальцями, щоб перемістити карту. Якщо користувач промахує карту одним пальцем, на карті з’являється накладка, яка підкаже користувачеві використовувати два пальці для переміщення карти. У настільних програмах користувачі можуть збільшувати або панорумувати карту, прокручуючи, натискаючи клавішу модифікатора (клавішу ctrl або ⌘).
• 'none': Цей параметр вимикає панорамування та переміщення карти на мобільних пристроях та перетягування карти на настільних пристроях.
• 'auto'(за замовчуванням): Залежно від того, чи може прокручуватися сторінка, API Google Maps JavaScript встановлює властивість жестівHandling 'cooperative'або'greedy'

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

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

Цей плагін вимикає iframe Карти Google із прозорим дією накладання та додає кнопку для розблокування. Ви повинні натиснути на 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>

У моєму випадку найважливішою справою було встановити 'scrollwheel':falseinit. Примітка: Я використовую jQuery UI Map. Нижче розміщений мій заголовок функції CoffeeScript init:

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

На всякий випадок ви використовуєте бібліотеку 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 });
}

Для когось, хто цікавиться, як відключити API Javascript Google Map

Це дозволить прокручувати масштабування, якщо натиснути карту один раз. І вимкніть, коли миша вийде з ключа.

Ось кілька прикладів

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>

Вам просто потрібно додати в параметри карти:

scrollwheel: false

Просте рішення:

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

Лише будь-хто зацікавлений у чистому рішенні 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;
}

Використовуйте той фрагмент коду, який надасть вам усі кольори та масштабування управління картою Google. ( ScaleControl: брехня і Коліщатко прокрутки: брехня буде перешкоджати коліщатка миші від масштабу вгору або вниз)

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

Я роблю це за допомогою цих простих іспитів

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,