Jquery 传单修复了地图双击功能在Firefox中滚动后无法正常工作的问题_Jquery_Html_Map_Doctype_Leaflet

Jquery 传单修复了地图双击功能在Firefox中滚动后无法正常工作的问题

jquery html map leaflet

Jquery 传单修复了地图双击功能在Firefox中滚动后无法正常工作的问题,jquery,html,map,doctype,leaflet,Jquery,Html,Map,Doctype,Leaflet,这个问题发生在Firefox和IE中，Chrome和Safari工作得很好。我有一张地图，上面有固定位置的传单，当我双击地图缩放时，它会向上滚动，不会出现问题。但是，当我向下滚动时，缩放会转到其他地方（南部），如果向下滚动得更深，缩放会增加如果删除DOCTYPE，我可以解决这个问题，但我不想这样做要重现这个问题，只需在Firefox中执行代码，向下滚动并双击地图进行缩放注意：我通过了W3C验证程序，所以问题可能来自传单代码如下： <!DOCTYPE html> <htm

这个问题发生在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>


试验
身体{
高度：4000px；
}
#地图{
位置：固定；
宽度：500px；
高度：300px；
顶部：50px；
左：100px；
}
//在“映射”div上初始化映射
map=L.map（'map'{
maxZoom:18，
minZoom:12，
缩放：14，
滚轮缩放：错误
});
地图.setView（[51.505，-0.09]，13）；
L.tileLayer（'http://{s}.tile.cloudmake.com/12099dbdd2c7459d99b220fea3008f7d/997/256/{z}/{x}/{y}.png'）.addTo（map）；

另外，这里是jsfiddle中的示例：（记住，在Chrome/Safari中它是有效的）

非常感谢您的帮助。

我添加了

dblclick

处理程序：

我发现用于缩放的

e.containerPoint

在不同的滚动下有不同的值

查看计算位置

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

：

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