Ruby on Rails - Leaflet-rails 'ReferenceError: L is not defined' Ruby on Rails - Leaflet-rails "引用错误：L未定义"

Question

我对Ruby on Rails和Leaflet都不熟悉，但是我正在尝试使用'leaflet-rails'版本1.6和Rails版本6.0.3.2来实现地图。

这里有一个类似的帖子，讨论了类似的问题。

当我加载页面时，出现'ReferenceError: L未定义'。我已经按照安装指南操作并尝试了整整两个晚上，但没有成功。唯一能让地图工作的方法是将下面的代码添加到我要实现地图的HTML文件中。

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"/> 

我已经检查过了，我正在使用leaflet-rails 1.6.0

我已经在Gemfile中添加了'gem 'leaflet-rails''

我已经在application.css文件中添加了'*= require leaflet'

我已经在application.js文件中添加了'//= require leaflet'

我已经在application.html.erb中添加了下面的代码

<%= javascript_pack_tag 'application', 'data-turbolinks-track': true %>
<%= stylesheet_link_tag 'application' %>

我已经将下面的代码添加到我创建的leaflet.rb文件中。

 ' Leaflet.tile_layer = 'http://{s}.tile.cloudmade.com/YOUR-CLOUDMADE-API-KEY/997/256/{z}/{x}/{y}.png'
# You can also use any other tile layer here if you don't want to use Cloudmade - see http://leafletjs.com/reference.html#tilelayer for more
Leaflet.attribution = 'Your attribution statement'
Leaflet.max_zoom = 18' 

当我刷新页面并检查HTML时，脚本正在运行以下代码。

var map = L.map('map', {});
map.setView([51.52238797921441, -0.08366235665359283], 18);
L.tileLayer('http://{s}.tile.cloudmade.com/YOUR-CLOUDMADE-API-KEY/997/256/{z}/{x}/{y}.png', {
          attribution: 'Your attribution statement',
          maxZoom: 18,
}).addTo(map);

如果我查看文件头部，它似乎引用了application.js文件，但是我没有看到它引用任何与Leaflet相关的内容。

<script src="/packs/js/application-9fe6f817df469889a178.js" data-turbolinks-track="true"></script>

我对Rails非常陌生，不知道下一步该尝试什么。

非常感谢任何帮助。谢谢，Rory。

- muzz00ka

---

跳过 gem，直接通过 Yarn 安装 Leaflet。你可以使用 yarn add leaflet 添加依赖项。在 Rails 6 中，作为 gem 分发的前端包是一个过时的概念，并且通常存在问题，因为它们总是落后于封装的包。 - max

//= require leaflet 这个注释是用于旧的资产管道的 Sprockets 指令，在 Webpack 中不会起作用。在 Webpack 中，你需要在主清单文件（或导入语句）中使用 require('leaflet') 函数来引入 Leaflet 库。这是完全不同的方式，你正在遵循过时的指示。请参考 https://github.com/rails/webpacker。 - max

嗨Max，非常感谢你回复那些信息，我真的很感激。这个问题一直困扰着我，我一直按照指示去做，但没有起到任何帮助作用，但是你说的现在让我明白为什么它不起作用了！我刚刚通过yarn安装了它，所以我会试着让地图显示出来，并向你汇报结果。再次感谢。Rory. - muzz00ka

只是一个快速的更新，我在使用yarn安装后花了不到7分钟就实现了它。真的很有帮助，可以指导我朝着正确的方向前进，而不是使用过时的技术。再次感谢！ - muzz00ka

很高兴你解决了问题。你可以选择自己回答你的问题，以帮助其他遇到相同问题的人。 - max

Answer 1

跳过 gem，直接通过 Yarn 安装 Leaflet。你可以使用 yarn add leaflet 命令添加依赖项。在 Rails 6 中，作为 gem 分发的前端包是一个过时的概念，并且通常会出现问题，因为它们总是落后于包装的包。- max

我按照 leaflet-rails 的 github 页面上过时的安装说明进行操作。我通过 gem 安装了 leaflet，但在 rails 6 中已经过时，所以我所有尝试初始化地图的努力都失败了。

//= require leaflet 注释是旧资产管道的 Sprockets 指令，在 Webpack 中不起作用。在 Webpack 中，你需要在主清单文件（或导入）中使用 require('leaflet') 函数。这是完全不同的东西，你正在遵循过时的说明。github.com/rails/webpacker - max

然后，我通过 yarn 安装了 leaflet，并在 application.js 中使用 require(leaflet) 进行初始化，并将 leaflet 的 CSS 添加到自己的文件中，并在我正在工作的 html.erb 文件中引用它。然后，只需使用内置的地图辅助函数，基本地图就能正常工作了。

 <%= map(:center => {
  :latlng => [51.52238797921441, -0.08366235665359283],
  :zoom => 18
}) %>

感谢Max为我解决了这个问题。

- muzz00ka