1

この問題は Firefox と IE で発生し、Chrome と Safari は問題なく動作します。リーフレットが固定位置にあるマップがあり、ダブルクリックしてマップをズームし、上にスクロールすると、問題なくズームします。しかし、下にスクロールすると、ズームは別の場所 (南) に移動し、下にスクロールするとズームが増加します。

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);
}

したがって、このメソッドをチェックして、コードの代わりにande.clientXを使用するように置き換えることができます: http://jsfiddle.net/yGaQM/3/。e.clientYe.pageXe.pageY

これは、Leafled が固定位置での使用を予定していなかったためだと思います。たとえば、ページをスクロールすると、マップも通常モードでスクロールされます (例: http://leafletjs.com/ )。固定しようとすると、マップはページスクロールでスクロールされませんが(あなたの場合)、スクロールは位置検出のために考慮されます。

于 2013-05-21T15:57:50.633 に答える