Question

查询从this question继续。我想知道如何在这个演示示例here中得到时间。在此示例中，当您滑动时，您也可以查看日期时间。目前我无法查看。

以下是我的代码：

html

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<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":"2014-12-11 22:00:00","startDate":"2014-12-08 20:00:00"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-73.9924459,40.7176705]},"properties":{"endDate":"2014-12-21 20:00:00","startDate":"2014-12-01 11:00:00"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-73.4557279,40.6790963]},"properties":{"endDate":"2014-12-08 20:00:00", "startDate":"2014-12-08 19:00: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

文档说：“调整使用的时间属性，使其适合您的项目”。他们实际意味着你必须编辑实际插件的源代码。如果你看一下LeafletSlider.js的第90和91行：

if(_options.markers[ui.value].feature.properties.time){
    if(_options.markers[ui.value]) $('#slider-timestamp').html(_options.markers[ui.value].feature.properties.time.substr(0, 19));

在您的情况下，您需要将其更改为：

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

在Plunker上查看此工作示例：http://plnkr.co/edit/K5nd6eZAfDfkfyEXHgMI?p=preview

单张滑块使用滑块显示下面的日期时间

1 个答案: