Question

尝试实现D Wilhem's Leaflet Slider，即Rails中JQuery UI slider的前端。我收到错误ReferenceError: Can't find variable: L。我看了很多讨论，想象我混淆了我的语法。页面加载和1）我的数据显示，2）滑块控件显示，但滑块不起作用，然后我得到上述错误。

 function makeMap() {
   L.mapbox.accessToken = $('body').data("mapboxToken");

   var map = L.mapbox.map('map', 'mtnbiker.d7jfhf8u') // Was: mapbox.streets
              .setView([34.040951, -118.258579], 13);

   L.control.fullscreen().addTo(map);

   var featureLayer = L.mapbox.featureLayer()
                     .loadURL('map/point_data.geojson')
                     .addTo(map);

   var featureLayer = L.mapbox.featureLayer()
                        .loadURL('map/line_data.geojson')
                         .addTo(map);

   var sliderControl = L.control.sliderControl({range: true, alwaysShowDate: true, timeStrLength: 10, layer: featureLayer});

   map.addControl(sliderControl); 

   sliderControl.startSlider();

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

   featureLayer.on('ready', function(e) {
     map.fitBounds(featureLayer.getBounds());
   });
  }

application.js：

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require 'leaflet.js'
//= require leaflet
//= require_tree .

地图加载了localhost中的数据（点和线）和不起作用的滑块。点数在Heroku上加载，但不是线条或滑块。 https://secure-shore-68966.herokuapp.com/map

答案：经过几周尝试不同的事情，MaptimeLA的一位朋友能够和我一起坐下来，找到了一个类型。她非常熟悉Rails和调试。 application.js是：

//  require jquery.ui
//  require jquery.ui.widget

固定

//= require jquery-ui
//= require jquery.ui.widget

感谢所有插话的人。

所有代码都在https://bitbucket.org/MtnBiker/crores5/。

PS。我看不到复选框说我想回答我自己的问题。

Answer 1

查看链接中的代码，按以下顺序加载以下脚本：

<script src="/assets/application-665a36b2268b441400787c68e9f08977c28cc33814ce32a46439c27016b720ec.js" data-turbolinks-track="true"></script>
<script src="https://api.tiles.mapbox.com/mapbox.js/v2.2.4/mapbox.js"></script>
<script src="https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://rawgit.com/dwilhelm89/LeafletSlider/master/SliderControl.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>

我怀疑某些内容正在按顺序加载，或者L正在某处丢弃。此外，我没有看到核心jQuery的加载位置。

查看Demo，他们会加载以下内容：

<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
<script src="https://rawgit.com/dwilhelm89/LeafletSlider/master/SliderControl.js" type="text/javascript"></script>

所以我认为你所缺少的是核心jQuery和Maybe the LeafletJS。这是一个基于他们提供的示例的工作JSFiddle。

https://jsfiddle.net/Twisty/sr0sjzk2/

Answer 2

这不是一个完整的答案。但是通过Rails中的资产管道并进行更改我已经消除了错误。问题可能是在使用各种教程时，我会在Ruby in Rails应用程序的不同位置放入不同版本的Leaflet或jQuery。

但是页面仍然无法正常工作。我在localhost上遇到TypeError: $("#leaflet-slider").slider is not a function. (In '$("#leaflet-slider").slider', '$("#leaflet-slider").slider' is undefined)错误。错误发生在D Wilhelm的SliderControl.js中。在Heroku上，没有错误但没有滑块。我会发一个新问题。 https://secure-shore-68966.herokuapp.com/map

感谢Twisty的帮助。

在Rails中的Mapbox地图上实现jwilhem的滑块

地图加载了localhost中的数据（点和线）和不起作用的滑块。点数在Heroku上加载，但不是线条或滑块。 https://secure-shore-68966.herokuapp.com/map

2 个答案: