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

Question

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

我有Firefox6的问题(不知道它是否也涉及早期版本).

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

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

源代码很简单:

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

met*_*ngs 5

您的问题也在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);

Run Code Online (Sandbox Code Playgroud)

此解决方法是使用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);

Run Code Online (Sandbox Code Playgroud)

请访问http://metadea.de/V/,了解(真正的)javaScript类函数是什么,以及为什么我喜欢jQuery :)

现在适合我.同样在Firefox中,地图正在缩放mousescroll,但不再滚动文档.

编辑:更新了对MozMousePixelScroll,精简版jS的支持

归档时间：	14 年，4 月前
查看次数：	2503 次
最近记录：	13 年，5 月前