初学者的传单时间滑块问题 [英] Leaflet time slider issue for a beginner

问题描述

我刚刚开始学习传单，并尝试在项目中实现这些东西时学习一些东西.传单时间滑块此处是我尝试的第三个第三方贡献者实现之一.我以直截了当的方式遵循了指示.

I just started learning leaflet and the trying to learn things as I implement them in my project. The leaflet time slider here is one of my first 3rd party contributor implementation that I'm attempting. I followed the directions in a straight forward manner.

下面是简化的代码:

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;
}

我按照链接中的建议添加了所有文件，如果有经验的话.请让我知道我还想念什么.我知道我还没有提出具体的问题，因为我在控制台上遇到的错误是源脚本上的错误，这使我相信我的脚本无法与模块正确通信.

I added all the files as suggested in the link, If anyone has experience with this. Kindly let me know what else am I missing. I understand that I have not posed a concrete issue because the errors I got on my console were on source script leading me to believe that my script is not communicating properly with the module.

谢谢！

推荐答案

您正在使用脚本标签加载jQuery UI样式表:

You're loading the jQuery UI stylesheet with a script tag:

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

您应该使用样式标签加载它:

You should load it using the style tag:

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

您忘了加载传单样式表:

You forgot to load the leaflet stylesheet:

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

这样做，一切正常.它有一个不是致命的错误，我猜这是SliderControl中的错误或文档中的错误:我必须注释掉这行"ui.value not defined"错误:

Doing that, everything works just fine. It has one error which is not fatal, which i'm guessing is a bug in SliderControl or error in the documentation: I had to comment out this line which errors with "ui.value not defined":

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

这是有关Plunker的工作示例: http://plnkr.co/edit/K5nd6eZAfDfkfyEXHgMI?p =预览

Here's the working example on Plunker: http://plnkr.co/edit/K5nd6eZAfDfkfyEXHgMI?p=preview

这篇关于初学者的传单时间滑块问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！