GMaps v3: как отменить события прокрутки мыши до того, как они прокрутят карту

Используя Google maps v2, я смог предотвратить переход событий прокрутки мыши (DOMMouseScroll) на карту и масштабирование карты, обработав и отменив события прокрутки мыши. Однако в v3 это больше не работает.

Вот пример. Попробуйте прокрутить текст колесиком мыши

Обратите внимание, как перетаскивание и двойные щелчки отменяются до того, как они попадут на карту, однако, если вы попытаетесь прокрутить текст, событие DOMMouseScroll сразу же перейдет к карте.

Код для отмены событий в основном такой же, как и в версии 2, и выглядит следующим образом:

  // Set the overlay's div_ property to this DIV
  this.div_ = div;

  var cancelEvent = function(e)
  {

        if( (navigator.userAgent.toLowerCase().indexOf('msie') != -1    && document.all) ||
                  navigator.userAgent.indexOf('Opera') > -1)  {
            window.event.cancelBubble = true;
            window.event.returnValue = false;
        } else {
            e.stopPropagation();
        }

        return false;
  }

  var panes = this.getPanes();
  panes.floatPane.appendChild(div);

  var stealEvents = [ 'mousedown', 'dblclick', 'DOMMouseScroll', 'onmousewheel', 'drag'];

  for( i=0; i < stealEvents.length; i++ ){
    google.maps.event.addDomListener(this.div_, stealEvents[i], cancelEvent);
  }


    // for IE/Opera
    if( (navigator.userAgent.toLowerCase().indexOf('msie') != -1    && document.all) || 
                    navigator.userAgent.indexOf('Opera') > -1)  {
        this.div_.attachEvent('onmousewheel', cancelEvents);
    }

    // for safari
    if ( navigator.userAgent.indexOf('AppleWebKit/') > -1)  {
        this.div_.onmousewheel = cancelEvents;
    }

google-maps javascript overlay google-maps-api-3 dom-events
person dougd_in_nc    schedule 01.05.2013    source источник

Ответы (2)


arrow_upward
9
arrow_downward

При инициализации карты V3 вы можете указать параметр для отключения масштабирования колесом прокрутки:

var mapOptions = {
  center: new google.maps.LatLng(-34.397, 150.644),
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  scrollwheel: false
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

Карта Google V3 — Параметры карты

Параметр, который вы ищете, это scrollwheel — вы хотите установить для него значение False — по умолчанию для него установлено значение True.

person John    schedule 01.05.2013
comment
Хорошо.. Я пытался просто отменить событие, но отключение масштабирования/движения карты при необходимости тоже работает. Я думаю, вы не можете отменить это событие, как в версии 2. - person dougd_in_nc; 01.05.2013

arrow_upward
1
arrow_downward

Потрясающий ответ от Джона, я не мог комментировать [из-за репутации], поэтому я отвечаю так, хотя ответ был принят (около двух лет назад).

По-видимому, логические значения JS написаны в нижнем регистре, поэтому правильный код:

var mapOptions = {
  center: new google.maps.LatLng(-34.397, 150.644),
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  scrollwheel: false
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
person user3818253    schedule 23.07.2015