Ruby on Rails - Leaflet-rails 'ReferenceError: L is not defined'答案

【问题标题】：Ruby on Rails - Leaflet-rails 'ReferenceError: L is not defined'Ruby on Rails - Leaflet-rails 'ReferenceError: L is not defined'
【发布时间】：2020-07-14 09:28:21
【问题描述】：

我是 Ruby on Rails 和 Leaflet 的新手，但我正在尝试使用 gem 'leaflet-rails' 版本 1.6 和 Rails 版本 6.0.3.2 来实现地图。

here 是关于类似问题的类似主题。

我在加载页面时收到“ReferenceError: L is not defined”。我已按照安装指南进行操作，并在过去 2 晚尝试实施地图，但无济于事。我能够让地图工作的唯一方法是，如果我将下面的代码添加到我试图在其中实现地图的 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

我已将 'gem 'leaflet-rails'' 添加到 Gemfile 中

我已在 application.css 文件中添加了“*= 要求传单”

我已在 application.js 文件中添加了“//= require”传单

我已将以下代码添加到 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 很陌生，所以我不知道下一步该尝试什么。

我将非常感谢任何帮助。问候，罗里。

【问题讨论】：

跳过 gem 并通过 Yarn 安装 Leaflet。您可以使用yarn add leaflet 添加依赖项。作为 gem 分发的前端包在 Rails 6 中是一个过时的概念。而且通常存在问题，因为它们总是落后于被包装的包。
//= require leaflet 注释是旧资产管道的 Sprockets 指令，不会在 Webpack 中执行任何操作。在 Webpack 中，您在主清单（或导入）中使用其 require('leaflet') 函数。它是一个非常不同的野兽，你正在遵循过时的说明。 github.com/rails/webpacker
嗨 Max，非常感谢您回复这些信息，我真的很感激。它一直让我发疯，我一直在严格执行所有操作，但并没有帮助，但是你说的现在有道理了，为什么它不起作用！我刚刚通过纱线安装了它，所以我会给它一个让地图显示的镜头，我会报告回来。再一次，谢谢。罗里。
只是一个快速更新，在我用 yarn 安装它后，我花了 7 分钟的时间来实现它。真正有助于指出正确的方向而不是使用过时的技术。再次感谢
很高兴它为您解决了问题。您可以选择自己回答问题，以帮助遇到相同问题的其他人。

标签： javascript ruby-on-rails ruby leaflet rubygems

【解决方案1】：

Blockquote 跳过 gem 并通过 Yarn 安装 Leaflet。您可以使用 yarn add 传单添加依赖项。作为 gems 分发的前端包在 Rails 6 中是一个过时的概念。通常存在问题，因为它们总是落后于被包装的包。 – 最大值

我在 Leaflet-rails github 页面上遵循过时的安装说明。我通过 gem 安装了传单，它现在在 rails 6 中已过时，所以我所有初始化地图的尝试都失败了。

//= 要求传单注释是旧资产管道的 Sprockets 指令，不会在 Webpack 中执行任何操作。在 Webpack 中，您在主清单（或导入）中使用它的 require('leaflet') 函数。它是一个非常不同的野兽，你正在遵循过时的指示。 github.com/rails/webpacker – 最大

然后我通过 yarn 安装了传单，并在 application.js 中使用require(leaflet) 对其进行了初始化，并将传单 css 添加到它自己的文件中，并在我正在处理的 html.erb 文件中引用了它。然后它只是简单地使用内置地图辅助功能，基本地图正在运行。

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

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

【讨论】：