我正在使用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>