Ruby on Rails - Leaflet-rails 'ReferenceError: L не определено' - PullRequest
Новая
       162

Ruby on Rails - Leaflet-rails 'ReferenceError: L не определено'

2 голосов
/ 14 июля 2020

Я новичок в Ruby на Rails и Leaflet, но я пытаюсь реализовать карту, используя гем 'leaflet-rails' версии 1.6 с версией Rails 6.0.3.2.

здесь - это аналогичная ветка по аналогичной проблеме.

Я получаю сообщение «ReferenceError: L не определено» при загрузке страницы. Я следовал руководству по установке и пытался реализовать карта за последние 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

Я добавил' * = require leaflet 'в приложение. css file

Я добавил в приложение буклет «// = требуется». js файл

Я добавил в приложение приведенный ниже код. 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'

Когда я обновляю sh страницу и проверяю 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.

Я был бы очень признателен за любую помощь. С уважением, Рори.

1 Ответ

0 голосов
/ 15 июля 2020

Blockquote Пропустите драгоценный камень и просто установите Leaflet through Yarn. Вы можете добавить зависимость с помощью проспекта добавления пряжи. Фронтенд-пакеты, распространяемые как драгоценные камни, являются устаревшей концепцией в Rails 6. И, как правило, проблема c, поскольку они всегда отставали от упакованного пакета. - max

Я следовал устаревшим инструкциям по установке на странице github с листовками. Я установил листовку с помощью драгоценного камня, который теперь устарел в rails 6, поэтому все мои попытки инициализировать карту были безуспешными.

Комментарий листовки // = require - это директива Sprockets для старого конвейера ресурсов и ничего не будет делать в Webpack. В Webpack вы используете функцию require ('листовка') в своем основном манифесте (или импорте). Это совсем другой зверь, и вы следуете устаревшим инструкциям. github.com/rails/webpacker - max

Затем я установил листовку с помощью пряжи и инициализировал ее в приложении. js с помощью require(leaflet) и добавил листовку css в свой собственный файл со ссылкой это в файле html .erb, над которым я работаю. Тогда это было просто использование встроенной вспомогательной функции карты, а карта basi c работает. 

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

Спасибо Максу за решение этой проблемы выпуск для меня.

...