传单/Openstreetmap，在地图路线中给我空白的白屏-解网

问：

注意，全新的编码器，甚至更新的 ruby on rails。创建一个项目，我需要一个交互式地图。

这是我按照传单教程和一些 youtube 视频所做的

首先，我将粗体代码行添加到我的应用程序.html.erb

   <!DOCTYPE html>
<html>
  <head>
    <title>TripMates</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
      **<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
      crossorigin=""/>**

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>
  
  <body>
    <%= render partial: "shared/navbar" %>
    <div class="container">
      <%= yield %>
      <br/><br/>
    </div>
    <nav>
      <ul>
        <% if current_user && current_user.admin? %>
          <li><%= link_to "View All Users", view_all_users_path %></li>
        <% end %>
      </ul>
    </nav>

    **<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
        crossorigin=""></script>**
  </body>
    
</html>

然后在我的应用程序/样式表中，我创建了一个名为 map.css 的文件，并为 map 设置参数

/* Map container styles */
#map {
    height: 100%; /* Set the desired height for your map */
    width: 600px;
  }

然后，我在我的应用程序/javascript 文件夹中创建了我的 maps.js 文件。它设置视图并导入切片图层

import L from 'leaflet';

document.addEventListener('DOMContentLoaded', () => {
  var map = L.map('map').setView([51.505, -0.09], 13);

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

然后，我将所有内容都包含在我的地图页面中

<!DOCTYPE html>
<html>
  <head>
    <title>Your Map Page</title>

    <link rel="stylesheet" href="map.css">
  </head>
  
  <body>
    
    <div id="map"></div>

    <script src="maps.js"></script>
  </body>
</html>

任何帮助都值得赞赏，真正不知道该怎么做

JavaScript HTML Ruby-on-Rails 宣传册 OpenStreetMap

传单/Openstreetmap，在地图路线中给我空白的白屏

Leaflet/Openstreetmap, giving me blank white screen in the map route

评论