Leaflet Time-Slider插件问题:滑动时间滑块时地图移动

时间:2016-06-16 14:10:42

标签: javascript jquery html leaflet jquery-ui-slider

我正在使用Dennis Wilhelm的time-slider plugin在我的传单地图上实现时间滑块。除了一个小问题外,一切都很完美。当我在IE中打开地图时(我使用IE版本11.0.31),当我滑动计时器滑块时,地图会移动。但是,我没有Chrome的问题。这似乎是IE特定的问题。我是HTML和JavaScript的新手,非常感谢任何想法和建议。

下面是一个简单的演示代码,我使用作者的指令代码进行了模拟:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
        <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
        <script src="http://code.jquery.com/jquery-2.2.4.min.js"></script> 
        <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" />
        <script src="SliderControl.js"></script>
    </head>

    <body>
        <h2 id="Time slider test"></h2>

        <div id="map" style="height: 600px; border: 1px solid #AAA;"></div>

        <script>
            var map=L.map("map").setView([51.6, -0.09], 10);

            var streetLayer = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
                maxZoom: 18,
                id: '*****',
                accessToken: '*****'
            }).addTo(map);

            var marker1 = L.marker([51.5, -0.09], {time: "2013-01-22 08:42:26+01"});
            var marker2 = L.marker([51.6, -0.09], {time: "2013-01-22 10:00:26+01"});
            var marker3 = L.marker([51.7, -0.09], {time: "2013-01-22 10:03:29+01"});

            var pointA = new L.LatLng(51.8, -0.09);
            var pointB = new L.LatLng(51.9, -0.2);
            var pointList = [pointA, pointB];

            var polyline = new L.Polyline(pointList, {
                time: "2013-01-22 10:24:59+01",
                color: 'red',
                weight: 3,
                opacity: 1,
                smoothFactor: 1
            });

            layerGroup = L.layerGroup([marker1, marker2, marker3]);
            var sliderControl = L.control.sliderControl({layer: layerGroup}).addTo(map);
            sliderControl.startSlider();
        </script>
    </body>
</html>

0 个答案:

没有答案