Question

我刚开始学习传单，并试图在我的项目中实现它们。传单时间滑块here是我尝试的第一个第三方贡献者实现之一。我直截了当地跟着指示。

以下是简化代码：

html

<div id="map">
</div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="js/SliderControl.js"></script>
<script src="js/script.js"></script>    
</body>
</html>

js

var map = L.map('map').setView([40.7241745, -73.9841674], 11);

L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ',
maxZoom: 16
}).addTo(map);

var myData = {"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-74.0481651,40.7208714]},"properties":{"endDate":"12/8/14 22:00","startDate":"12/8/14 19:00"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-73.9924459,40.7176705]},"properties":{"endDate":"12/9/14 19:00","startDate":"12/9/14 19:00"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-73.4557279,40.6790963]},"properties":{"endDate":"12/9/14 22:00","startDate":"12/9/14 20:00"}}]}

var mylayer = L.geoJson(myData).addTo(map);
var sliderControl = L.control.sliderControl({position: "topright", layer: mylayer});
map.addControl(sliderControl);
sliderControl.startSlider();
$('#slider-timestamp').html(options.markers[ui.value].feature.properties.startDate.substr(0, 19));
// only change I made was use startDate instead of default time as startDate is a column in my //feature set.
css

div#map {
 height: 600px;
 width: 800px;
 margin-left: auto;
 margin-bottom: auto;
 margin-top: auto;
 margin-right: auto;
 left: 20px;
 border-color: #000000;
 z-index: 0;
}

body {
 padding: 0px;
 background-color: #fff;
}

我添加了链接中建议的所有文件，如果有人有这方面的经验。请让我知道我还缺少什么。我知道我没有提出具体的问题，因为我在控制台上遇到的错误是在源脚本上导致我相信我的脚本与模块没有正确通信。

谢谢！

Answer 1

您正在使用脚本标记加载jQuery UI样式表：

<script src="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"></script>

您应该使用样式标记加载它：

<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />

您忘记加载传单样式表：

<link type="text/css" rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />

这样做，一切正常。它有一个不是致命的错误，我猜是SliderControl中的一个错误或文档中的错误：我不得不注释掉这行错误“ui.value not defined”：

$('#slider-timestamp').html(options.markers[ui.value].feature.properties.startDate.substr(0, 19));

以下是关于Plunker的工作示例：http://plnkr.co/edit/K5nd6eZAfDfkfyEXHgMI?p=preview

初学者的传单时间滑块问题

1 个答案: