Карты Google в Firefox6 увеличивают и прокручивают страницу - PullRequest
3 голосов
/ 19 августа 2011

У меня проблема с Firefox6 (не знаю, касается ли это и более ранних версий).

Я хочу встроить карту Google на страницу, и когда страница имеет полосы прокрутки (длиннее области просмотра), колесо мыши не только увеличивает масштаб карты, но и прокручивает страницу. Я пытался поймать событие mousewheel и остановить распространение, но это событие не отслеживается при наведении курсора на карту. Когда курсор находится над элементами управления карты (масштабирование, логотип 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>

Ответы [ 4 ]

5 голосов
/ 16 мая 2012

Ваша проблема также описана на 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

Обнаружен также обходной путь, который не заключается в повторной прокрутке или повторном масштабировании и работает нормально:

Новый ScrollInterceptOverlay, полученный из google.maps.OverlayView, добавляющий div в MapPanes.overlayMouseTarget:

Версия с 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, необходимый для вычисления externalWidth и 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

4 голосов
/ 19 сентября 2011

На данный момент это выглядит как ошибка Firefox . Закрывает вопрос, когда ошибка будет исправлена.

0 голосов
/ 18 декабря 2011

Почему бы не взять управление масштабированием в пользовательском интерфейсе?Это хорошо работает для меня.

<!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>
0 голосов
/ 22 августа 2011

У меня была такая же проблема.

Вы можете попытаться запустить Firefox с совершенно новым профилем (например, запустив Диспетчер профилей - запустите «firefox -P» в системах Windows - и выбрав «Создать ...») и посмотрите, сохраняется ли проблема.

У меня было несколько старых, но, казалось бы, пустых пользовательских профилей, лежащих в виртуальных машинах, которые я использовал, чтобы проверить, была ли это ошибка в FF 6, и, очевидно, установка только новых двоичных файлов не помогла. С другой стороны, создание пустого профиля сделало , так что я могу думать только о том, что это сбой миграции. Однако если основные версии FF будут выпускаться раз в два месяца, многие люди будут страдать от подобных проблем.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...