Fatal编程技术网
  • firefox/
  • firefox6中的谷歌地图缩放znd滚动页面

firefox6中的谷歌地图缩放znd滚动页面

firefox google-maps

firefox6中的谷歌地图缩放znd滚动页面,firefox,google-maps,Firefox,Google Maps,我对Firefox6有问题（不知道它是否也涉及早期版本） 我想在页面上嵌入谷歌地图，当页面有滚动条（比视口长）时，鼠标滚轮不仅可以缩放地图，还可以滚动页面。我试图捕获鼠标滚轮事件并停止传播，但当光标移动到地图上时，无法捕获此事件。当光标位于地图控件（缩放控件、谷歌徽标等）上时，我可以捕捉事件并停止传播 更奇怪的是，它并不总是发生。有时页面滚动，几次滚动后停止，鼠标滚轮仅缩放地图（如预期）。有时页面不滚动，有时页面一直在缩放。找不到图案 源代码很简单： <!DOCTYPE html>

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

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

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

源代码很简单：

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


测试
window.onload=函数（）{
var latlng=新的google.maps.latlng（52.25,21.01）；
映射选项={
缩放：12，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP，
街景控制：错误，
动物控制：对，
mapTypeControl:false
};
map=new google.maps.map（document.getElementById（“map_canvas”），mapOptions）；
}

-大量文本-


-大量文本-
我也有同样的问题

您可以尝试使用全新的配置文件启动Firefox（例如，启动配置文件管理器-在windows系统上执行'Firefox-p'，然后选择'Create…'），并查看问题是否仍然存在

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

目前看来。将关闭问题，何时修复错误。

为什么不使用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>


//加载事件
$（函数（）{
变量myOptions={
缩放：8，
中心：新google.maps.LatLng（-34.397150.644），
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（$（'.canvas'）[0]，myOptions）；
var overlay=new google.maps.OverlayView（）；
overlay.draw=函数（）{}；
覆盖.setMap（map）；
//只有一个Mozilla bug
if（$.browser.mozilla）{
//等待映射DOM准备就绪
google.maps.event.addListenerOnce（map'idle'，function（）{
$（'.canvas>div>div:first child>div'）.bind（'DOMMouseScroll'，函数（e）{
//需要设置超时，否则返回false无效
setTimeout（函数（）{
//计算新中心
var offset=$（'.canvas'）.offset（）；
var pos=overlay.getProjection（）.fromContainerPixelToLatLng（新的google.maps.Point（e.pageX-offset.left，e.pageY-offset.top））；
//计算新的缩放级别
var zoom=map.getZoom（）；
如果（e.detail<0）缩放++；
否则，如果（e.detail>0）缩放--；
地图设置中心（pos）；
map.setZoom（缩放）；
}, 1);
//停止传播（防止默认）
返回false；
});
});
}
});
code.google.com上也描述了您的问题，该问题仅在Firefox中存在，但不是Firefox的错误：

我们还找到了一种解决方法，即不重新滚动或重新缩放，效果良好：

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

使用jQuery的版本 还请访问了解什么是（真实的）javaScript类函数，以及我为什么喜欢jQuery:）

现在对我有用。 同样在Firefox中，地图在mousescroll上缩放，但不再滚动文档

编辑：更新了对MozMousePixelScroll、精炼jS的支持，我已经尝试过了，但问题仍然存在。我还注意到，当我缓慢缩放（例如每秒一步）时，无法停止滚动页面，但当我快速缩放页面时，页面不会滚动。顺便说一句，首先在地图上滚动控件（如缩放栏），然后在地图上暂时解决错误（直到您再次在地图外滚动）。也许有人能想出一个解决方案来模仿用户在mouseenter上的行为？ 
// 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);

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