Question

问题出现在Firefox和IE中，Chrome和Safari工作得很好。我有一张Leaflet在固定位置的地图，当我双击放大地图时，我向上滚动它可以毫无问题地缩放。但是，当我向下滚动时，缩放到其他地方（向南），如果我向下滚动，它会递增。

如果删除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中它可以正常工作）

任何帮助都会非常感激。

Answer 1

我添加了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/上）。当您尝试使其固定时，地图不会滚动页面滚动（在您的情况下），但滚动仍然考虑进行位置检测。

滚动后，小册子固定地图双击功能在Firefox中无法正常工作

1 个答案: