Фиктивная карта с фиксированной платой с двойным щелчком не работает должным образом в Firefox после прокрутки

Проблема возникает в Firefox и IE, Chrome и Safari отлично работают. У меня есть карта с лифлетом в фиксированном положении, и когда я дважды нажимаю, чтобы увеличить карту, и я прокручиваю ее, масштабирование без проблем. Но, когда я прокручиваю вниз, зум идет в другое место (на юг), и он увеличивается, если я прокручиваю глубже.Фиктивная карта с фиксированной платой с двойным щелчком не работает должным образом в Firefox после прокрутки

Я могу исправить проблему, если я удалю DOCTYPE, но я не хочу этого делать.

Чтобы воспроизвести проблему, просто выполните код в Firefox, прокрутите вниз и дважды щелкните по карте для увеличения.

ПРИМЕЧАНИЕ. Я прошел валидатор W3C, поэтому проблема может быть из листовки.

Вот код:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Test</title> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
     <script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script> 
     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css"> 
     <style type="text/css"> 

    body { 
     height: 4000px; 
    } 

    #map { 
     position: fixed; 
     width: 500px; 
     height: 300px; 
     top: 50px; 
     left: 100px; 
    } 
    </style> 
</head> 

<body> 

    <div id="map"></div> 

    <script type="text/javascript"> 
    // Initialize the map on the "map" div 
    map = L.map('map', { 
     maxZoom: 18, 
     minZoom: 12, 
     zoom: 14, 
     scrollWheelZoom: false 
    }); 

    map.setView([51.505, -0.09], 13); 

    L.tileLayer('http://{s}.tile.cloudmade.com/12099dbdd2c7459d99b220fea3008f7d/997/256/{z}/{x}/{y}.png').addTo(map); 
    </script> 
</body>

Кроме того, здесь приведен пример в jsfiddle: http://jsfiddle.net/yGaQM/ (помните, что в Chrome/Safari работает)

Любая помощь будет очень ценна ,

источник

2013-05-21 antonio escudero

Я добавил dblclick обработчика http://jsfiddle.net/yGaQM/2/:

this.map.on('dblclick', function (e) { 
    console.log(e); 
    // debugger; 
});

И я обнаружил, что e.containerPoint, которые используются для увеличения имеет различные значения с различной прокруткой.

Посмотрите на L.DomEvent.getMousePosition где рассчитывается e.containerPoint:

getMousePosition: function (e, container) { 

    var body = document.body, 
    docEl = document.documentElement, 
    x = e.pageX ? e.pageX : e.clientX + body.scrollLeft + docEl.scrollLeft, 
    y = e.pageY ? e.pageY : e.clientY + body.scrollTop + docEl.scrollTop, 
    pos = new L.Point(x, y); 

    return (container ? pos._subtract(L.DomUtil.getViewportOffset(container)) : pos); 
}

Таким образом, вы можете попробовать проверить этот метод и заменить его на свой код для использования e.clientX и e.clientY вместо e.pageX и e.pageY: http://jsfiddle.net/yGaQM/3/.

Я думаю, что это потому, что листы не планировались для фиксированного использования положения. Например, когда вы прокручиваете страницу, карта также будет прокручиваться в нормальном режиме (например, на http://leafletjs.com/). Когда вы пытаетесь сделать это, карта не прокручивается с прокруткой страницы (в вашем случае), но прокрутка по-прежнему рассматривается для определения местоположения.

источник

2013-05-21 15:57:50 tbicr

спасибо. Это работало как шарм :) –

Это исправило это для меня тоже. Я заметил это на последнем Chrome даже без позиции: исправлено. Почему вы не отправляете вопрос/PR в проект Leaflet GitHub? – WildService

Проблема без позиции: исправлена ошибка. Проблема с функцией position: fixed. В вашем случае для Chrome он может работать, но уверен, что он будет работать для всех основных браузеров и устойчив к изменениям позиции страницы? Если вы считаете, что проблема с 'position: fixed' должна быть реализована в ядре, вы можете отправить ее самостоятельно. – tbicr

Фиктивная карта с фиксированной платой с двойным щелчком не работает должным образом в Firefox после прокрутки

ответ

Смежные вопросы