1

该问题发生在 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 中它可以工作）

任何帮助将非常感激。

4

1 回答 1

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.clientXande.clientY代替：http : //jsfiddle.net/yGaQM/3/。e.pageXe.pageY

我认为这是因为 Leafled 没有计划用于固定位置。例如，当您滚动页面时，地图也会滚动到正常模式（如http://leafletjs.com/上的示例）。当您尝试使其固定时，地图不会随页面滚动（在您的情况下）滚动，但仍会考虑滚动以进行位置检测。

于 2013-05-21T15:57:50.633 回答