如何在 Rails 7 中使用 Leaflet？

Question

我想做的事情： 我想在 Rails 7 应用程序中使用 Leaflet。

我做了什么： 我创建了我的 rails 应用程序并生成了一个名为 map 的模型（带有控制器和视图），只有一个标题。然后我添加了一条地图记录。

我像这样在应用程序中添加了传单：

./bin/importmap pin leaflet

我在 app/views/map/show.html.erb 中添加了带有刺激属性的地图 div，现在看起来像这样：

<p style="color: green"><%= notice %></p>
<%= render @map %>

<div data-controller="map" data-target="map.placeholder">

<div><%= link_to "Edit this map", edit_map_path(@map) %> | <%= link_to "Back to maps", maps_path %>
<%= button_to "Destroy this map", @map, method: :delete %> </div>

然后我创建了 app/javascript/controllers/map_controller.js 看起来像这样：

// map_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "placeholder" ]

  connect(){
    import("leaflet").then( L => {
      this.map = L.map(this.placeholderTarget,{zoomDelta:0.5,zoomSnap:0.5}).setView([ 50.1960, -6.8712 ], 10);

      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(this.map);
    });
  }

  disconnect(){
    this.map.remove()
  }

}

我得到的： 我到处都是随机的瓷砖，就像这样：

我可以点击图块并移动和缩放，然后它们闪烁，仍然很乱，甚至像这样覆盖 rails html 文本：

我试过的：

正在使用 importmap 安装 leaflet-css
并使用 'leaflet-container'

但似乎什么都没有改变。

任何关于如何让 Leaflet 在 Rails7 中工作的建议将不胜感激！（我真的很想让它与默认的热线和刺激一起工作）。谢谢。

Answer 1

好的，我自己找到了答案：Leaflet 丢失了 css 个文件。

使用 importmap 安装 leaflet-css 时（正如我上面提到的），以下行会自动添加到 config/importmap.rb :

pin "leaflet-css", to: "https://ga.jspm.io/npm:leaflet-css@0.1.0/dist/leaflet.css.min.js"

然后我在 map_controller.js 文件的顶部添加了以下行：

import "leaflet-css"

并将以下内容添加到 div 标签（样式标签仅用于此处测试。我将使用 tailwind）：

 class="leaflet-container" style="min-height: 800px;"

然后它按预期工作：

最后简单而合乎逻辑。我有一种感觉，我会喜欢 Rails 7!

如何在 Rails 7 中使用 Leaflet？

How do I use Leaflet in Rails 7?

javascript

leaflet

stimulusjs

ruby-on-rails-7

hotwire-rails