如何在 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 文本，如下所示：

我尝试过的：

1. 使用 importmap 安装 leaflet-css
2. 并使用 'leaflet-container' 添加类属性代码>

但似乎一切都没有改变。

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

Answer 1

好的，我自己找到了答案：Leaflet 缺少 css 文件。

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

pin "leaflet-css", to: "https://ga.jspm.io/npm:[email protected]/dist/leaflet.css.min.js"

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

import "leaflet-css"

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

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

然后它按预期工作：

最终简单且合乎逻辑。我有预感我会喜欢 Rails 7！