GMaps v3:如何在鼠标滚动地图之前取消鼠标滚动事件

GMaps v3: How to cancel mouse scroll events before they scroll map

本文关键字：滚动 鼠标 取消 事件 地图 v3 GMaps      更新时间：2023-09-26

使用Google maps v2，我能够通过处理和取消鼠标滚动事件来阻止鼠标滚动(dommousescroroll)事件进入地图和缩放地图。但是，在v3中，这不再工作了。

下面是一个例子。尝试用鼠标滚轮滚动文本

请注意，拖动和双击在到达地图之前是如何被取消的，但是如果您尝试滚动文本，那么dommousescroroll事件将直接进入地图。

取消事件的代码基本上与v2相同，看起来像这样:

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

初始化V3 Map时，您可以指定一个选项来禁用滚轮缩放:

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

谷歌地图V3 -地图选项

您要查找的选项是scrollwheel -您希望将其设置为False -默认情况下该设置为True

约翰的回答太棒了，我不能评论[由于代表]，所以我这样回答——尽管这个答案已经被接受了(大约两年前)。

显然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);
相关文章：