javascript - rails 上的 ruby : leaflet-rails not loading

标签 javascript ruby-on-rails rubygems leaflet sprockets

使用RoR 4.1.4

我正在尝试使用 leaflet-rails gem 。我按照 github 页面中概述的步骤进行操作,但是当我尝试加载 map 时,我看到

ReferenceError: L is not defined

在浏览器控制台中。这显然意味着 gem 的帮助程序正在加载并执行,但它找不到 leaflet.js 文件。

但是,页面的头部显示 /assets/leaflet.js 正在被引用,并且它实际上就在那里。

当我查看生成的代码时:

    <div id="map"></div>
    <script>
    var map = L.map('map')
    map.setView([-54.0, 6.08], 16)
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
              attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
              maxZoom: 18,
    subdomains: '',
    }).addTo(map)
    </script>
  </div>
  <script src="/assets/jquery.js?body=1" data-turbolinks-track="true"></script>
  <!-- all the other scripts loaded -->
  <script src="/assets/exif.js?body=1" data-turbolinks-track="true"></script>
  <script src="/assets/leaflet.js?body=1" data-turbolinks-track="true"></script>
  <!-- some more scripts -->

因此,gem 在 map div 的正下方添加了一个脚本,只有这样,由于 sprockets 机制等原因,其他脚本才会被加载。对我来说,显然脚本不可能加载 leaflet.js,因为之后会被引用!

所以...我是否误解了 RoR 如何处理 gems 和 javascript?它一定在某个时候一直在工作......

这是我的/app/assets/javascript/application.js:

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

// Here I load a whole bunch of javascripts which are related to jquery-fileupload, cut for brevity
//= require bootstrap.min
//= require bootbox.min 
//= require bootstrap-datepicker

//= require exif 
//= require leaflet

//= require turbolinks
//= require_tree .

最佳答案

事实证明这可能是一些 RoR 特定问题。

许多网站建议放置

<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

在文件末尾加载 JavaScript 的行,以加快页面显示速度。随着leaflet-rails gem,这不太好,并且会产生上述问题。如果将同一行放入 <head>部分,问题就消失了......

附注不过,我仍然对 gem 有疑问,现在我明白了

Error: No value provided for variable {s}

如果我用“http://{s}.tile.osm.org/{z}/{x}/{y}.png”替换“http://a.tile.osm.org/{z}/{x}/{y}.png"”,它就可以工作...但不要认为它应该那样工作...但这是一个不同的问题...

关于javascript - rails 上的 ruby : leaflet-rails not loading,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27322432/

相关文章:

javascript - JS - 骰子掷两次,想要检查循环中是否有双掷

javascript - 动态更改按钮名称

ruby-on-rails - Rails 将 txt 文件导入数据库

ruby-on-rails - 运行 "db:test:load => db:test:purge"而不重置数据库

ruby-on-rails - 启动 Rails 服务器时出现问题

javascript - 在后台从 API 加载数据

javascript - 使用 Node 在rehindb中插入错误

ruby-on-rails - 自定义 field_with_errors

javascript - Rails 外部 JS 作为 gem

ruby-on-rails - 找出已安装 gem 的来源