Question

我对Firefox6有疑问（不知道它是否也涉及早期版本）。

我想在页面上嵌入Google地图，当页面有滚动条（比视口长）时，鼠标滚轮不仅可以缩放地图，还可以滚动页面。我试图捕捉鼠标滚轮事件并停止传播，但是当光标在地图上时，此事件无法捕获。当光标在地图控件（缩放控件，谷歌徽标等）上时，我可以捕捉事件并停止传播。

更奇怪的是，它总是不会发生。有时页面滚动并在几次滚动后停止并且鼠标滚轮仅缩放地图（如预期的那样）。有时页面不会滚动，有时它会一直滚动缩放。找不到模式。

源代码很简单：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>test</title>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
            window.onload = function(){
            var latlng = new google.maps.LatLng(52.25, 21.01);
            mapOptions = {
            zoom: 12,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            streetViewControl: false,
            zoomControl:true,
            mapTypeControl:false
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
            }
        </script>

    </head>
    <body>
        <p style="height:500px;">-lot of text-</p>
        <div id="map_canvas" style="width:500px; height:500px;"></div>
        <p style="height:500px;">-lot of text-</p>
    </body>
</html>

Answer 1

您的问题也在code.google.com上有描述，此问题仅在Firefox中出现，但它不是Firefox错误：

http://code.google.com/p/gmaps-api-issues/issues/detail?id=3652 http://code.google.com/p/gmaps-api-issues/issues/detail?id=1605

还找到了一种解决方法，即不重新滚动或重新缩放并且工作正常：

从google.maps.OverlayView派生的新ScrollInterceptOverlay，在MapPanes.overlayMouseTarget上添加div：

带有jQuery的版本

// Ensure to have google.maps loaded:
// var gmap = new google.maps.Map($googlemap[0], mapOptions);

// Define a ScrollInterceptOverlay function
var ScrollInterceptOverlay = function (gmap) {
  if (!(this instanceof ScrollInterceptOverlay)) return;

  var $div;
  var $mapDiv;

  var initialize = function () {
    $div = $('<div />').css({
      position: 'absolute', top: 0, left: 0,
      display: 'inline-block'
    });

    var div = $div[0];
    if (div && div.addEventListener) {
      // Internet Explorer, Opera, Google Chrome and Safari
      div.addEventListener("mousewheel", mouseScrollStop);
      // Firefox
      div.addEventListener("DOMMouseScroll", mouseScrollStop);
      div.addEventListener("MozMousePixelScroll", mouseScrollStop);
    }
    else if (div && div.attachEvent) { // IE before version 9
      div.attachEvent("onmousewheel", mouseScrollStop);
    }

    this.setMap(gmap);
  };

  var mouseScrollStop = function (e) {
    if (e && e.preventDefault) e.preventDefault();
  };

  this.onAdd = function () {
    $div.prependTo(this.getPanes().overlayMouseTarget);
  };

  this.onRemove = function () {

    var div = $div[0];
    if (div && div.addEventListener) {
      // Internet Explorer, Opera, Google Chrome and Safari
      div.addEventListener("mousewheel", mouseScrollStop);
      // Firefox
      div.addEventListener("DOMMouseScroll", mouseScrollStop);
      div.addEventListener("MozMousePixelScroll", mouseScrollStop);
    }
    else if (div && div.attachEvent) { // IE before version 9
      div.attachEvent("onmousewheel", mouseScrollStop);
    }

    $div.detach();
  };

  this.draw = function () {
    if ($mapDiv && $mapDiv.length === 1) {
      $div.css({
        width: $mapDiv.outerWidth(),
        height: $mapDiv.outerHeight()
      });
    }
  };

  var base_setMap = this.setMap;
  this.setMap = function (map) {
    $mapDiv = $(map.getDiv());
    base_setMap.call(this, map);
  };

  initialize.call(this);
};
// Setup prototype as OverlayView object
ScrollInterceptOverlay.prototype = new google.maps.OverlayView();

// Now create a new ScrollInterceptOverlay OverlayView object:
var mapScrollInterceptor = new ScrollInterceptOverlay(gmap);

此解决方法是使用jQuery，计算outerWidth和outerHeight所需，但也可以更好地阅读。

纯JavaScript版本

实时测试：http://fiddle.jshell.net/fhSMM/7/

// Ensure to have google.maps loaded:
// var gmap = new google.maps.Map(googlemap, mapOptions);

// Define a ScrollInterceptOverlay class function
var ScrollInterceptOverlay = function () {
  if (!(this instanceof ScrollInterceptOverlay)) return;

  var div;

  // private instance function
  var mouseScrollStop = function (e) {
    if (e && e.preventDefault) e.preventDefault();
  };

  // public instance function
  this.onAdd = function () {
    div = document.createElement('div');
    div.style.display = 'inline-block';
    div.style.position = 'absolute';
    div.style.top = div.style.left = 0;

    if (div.addEventListener) {
      // Internet Explorer, Opera, Google Chrome and Safari
      div.addEventListener("mousewheel", mouseScrollStop);
      // Firefox
      div.addEventListener("DOMMouseScroll", mouseScrollStop);
      div.addEventListener("MozMousePixelScroll", mouseScrollStop);
    }
    else if (div.attachEvent) { // IE before version 9
      div.attachEvent("onmousewheel", mouseScrollStop);
    }

    var pane = this.getPanes().overlayMouseTarget;
    var firstChild = pane.firstChild;
    if (!firstChild) {
      pane.appendChild(div);
    }
    else {
      pane.insertBefore(div, firstChild);
    }
  };

  // public instance function
  this.onRemove = function () {
    if (div) {
      if (div.removeEventListener) {
        // Internet Explorer, Opera, Google Chrome and Safari
        div.removeEventListener("mousewheel", mouseScrollStop);
        // Firefox
        div.removeEventListener("DOMMouseScroll", mouseScrollStop);
        div.removeEventListener("MozMousePixelScroll", mouseScrollStop);
      }
      else if (div.detachEvent) { // IE before version 9
        div.detachEvent("onmousewheel", mouseScrollStop);
      }

      var parent = div.parentNode;
      parent.removeChild(div);
    }

    // do not delete div var'iable
    div = undefined;
  };

  // public instance function
  this.draw = function () {
    var map = this.getMap();
    if (map) {
      var mapDiv = map.getDiv();
      if (mapDiv) {
        var rect = mapDiv.getBoundingClientRect();
        div.style.width = rect.width + 'px';
        div.style.height = rect.height + 'px';
      }
    }
  };

};
// Setup prototype as OverlayView object
ScrollInterceptOverlay.prototype = new google.maps.OverlayView();

// Now create a new ScrollInterceptOverlay OverlayView object:
var mapScrollInterceptor = new ScrollInterceptOverlay();
mapScrollInterceptor.setMap(gmap);

请同时访问http://metadea.de/V/关于（真正的）javaScript类函数是什么，以及为什么我喜欢jQuery：）

现在为我工作。同样在Firefox中，地图正在放大mousescroll，但不再滚动文档。

编辑：更新了对MozMousePixelScroll的支持，精简了jS

Answer 2

现在它看起来像firefox bug。将在错误修复时关闭问题。

Answer 3

我遇到了同样的问题。

您可以尝试使用全新的配置文件启动Firefox（例如，启动配置文件管理器 - 在Windows系统上执行'firefox -P' - 并选择'创建...'）并查看问题是否仍然存在。

我有几个旧但看似空的用户配置文件位于虚拟机中我用来验证这是否是FF 6中的错误，显然只安装新的二进制文件没有帮助。 另一方面，创建空白配置文件，所以我只能认为这是一个迁移故障。如果FF的主要版本将每两个月发布一次，那么很多人都会遇到类似的问题。

Answer 4

为什么不采用UI控制缩放？这对我很有用。

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>
<body>
    <div class="canvas" style="width:600px;height:400px;"></div>
    <script>
        // Load event
        $(function() {
            var myOptions = {
                zoom: 8,
                center: new google.maps.LatLng(-34.397, 150.644),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map($('.canvas')[0], myOptions);
            var overlay = new google.maps.OverlayView();
            overlay.draw = function() {};
            overlay.setMap(map);

            // Only a Mozilla bug
            if($.browser.mozilla) {
                // Wait for the map DOM to be ready
                google.maps.event.addListenerOnce(map, 'idle', function() {
                    $('.canvas > div > div:first-child > div').bind('DOMMouseScroll', function(e) {
                        // setTimeout needed otherwise the return false has no effect
                        setTimeout(function() {
                            // Calculate new center
                            var offset = $('.canvas').offset();
                            var pos = overlay.getProjection().fromContainerPixelToLatLng(new google.maps.Point(e.pageX-offset.left, e.pageY-offset.top));

                            // Calculate new zoom level
                            var zoom = map.getZoom();
                            if(e.detail < 0) zoom++;
                            else if(e.detail > 0) zoom--;

                            map.setCenter(pos);
                            map.setZoom(zoom);
                        }, 1);

                    // Stop propagation (prevent default)
                        return false;
                    });
                });
            }
        });
    </script>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

谷歌地图在firefox 6缩放和滚动页面

4 个答案:

带有jQuery的版本

纯JavaScript版本