ruby-on-rails 在Rails中实现MapboxMap上的jwilhem滑块

3pvhb19x 于 2023-02-26 发布在 Ruby

关注(0)|答案(2)|浏览(183)

尝试实现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 .

Map加载数据（点和线）和本地主机上不起作用的滑块。点正在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/。
附言。我看不到复选框说我想回答我自己的问题。

ruby-on-rails

来源：https://stackoverflow.com/questions/40472951/implementing-jwilhems-slider-on-a-mapbox-map-in-rails

2条答案

按热度按时间

but5z9lq1#

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

<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和LeafletJS。下面是一个基于他们提供的示例的工作JSFiddle。
https://jsfiddle.net/Twisty/sr0sjzk2/

赞(0）回复(0）举报 2023-02-26

olhwl3o22#

这并不是一个完整的答案。但是通过在Rails中的资产管道工作并进行修改，我已经消除了这个错误。问题可能是在使用各种教程时，我会在Ruby on 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的帮助。

赞(0）回复(0）举报 2023-02-26

我来回答

ruby-on-rails 在Rails中实现MapboxMap上的jwilhem滑块

Map加载数据（点和线）和本地主机上不起作用的滑块。点正在Heroku加载，但线和滑块均未加载。https://secure-shore-68966.herokuapp.com/map。

2条答案

相关问题

热门标签

最新问答