Question

我正在尝试为我的Rails应用实现地图。我正在使用Mapbox。检查到某个点后，当我进行检查时，可以在浏览器中看到对象的经度和纬度，但是看不到地图。我只能看到地图应该位于的空白DIV。这使我相信CSS丢失了。我确定我已经正确导入了CSS。熟悉Rails的人可以告诉我哪里可能出问题了吗？

我已经添加了mapbpox纱线：yarn添加了mapbox-gl。

我的mapbox API密钥也位于我的.env文件中

这是函数： app / javascript / plugins / init_mapbox.js

import mapboxgl from 'mapbox-gl';

const initMapbox = () => {
  const mapElement = document.getElementById('map');

  if (mapElement) { // only build a map if there's a div#map to inject into
    mapboxgl.accessToken = mapElement.dataset.mapboxApiKey;
    const map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v10'
    });
  }
};

export { initMapbox };

app / javascript / packs / application.js

console.log('Hello World from Webpacker')


import 'mapbox-gl/dist/mapbox-gl.css'; // <-- you need to uncomment the stylesheet_pack_tag in the layout!

import { initMapbox } from '../plugins/init_mapbox';

initMapbox();

app / layouts / application.html.erb：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>HairDo</title>
    <%= csrf_meta_tags %>
    <%= action_cable_meta_tag %>    
    <%= stylesheet_link_tag 'application', media: 'all' %>
    <%= stylesheet_pack_tag 'application', media: 'all' %> <!-- Uncomment if you import CSS in app/javascript/packs/application.js -->

  </head>
  <body>
    <%= yield %>
    <%= javascript_include_tag 'application' %>
    <%= javascript_pack_tag 'application' %>
  </body>
</html>

app / views / haridressers / index.html.erb

<h2>See all hairdressers</h2>

  <div class="row justify-content-around p-3">
    <div class="col-lg-12">
    <% @hairdressers.each do |hairdresser| %>
      <div class="card-hairdresser m-3">
        <div>
         <!--  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJVvH5nQJp3WUIhCkdYHcRd5bR5szxoDyQI7fzyZbjbVNeDSqc" style='height: 100%; width: 100%; object-fit: contain'> -->
         <%= cl_image_tag hairdresser.photo, width: 300, height: 200, crop: :fill %>
        </div>


        <div class="card-body">
          <h5 class="card-title"><%= link_to hairdresser.name, hairdresser_path(hairdresser) %></h5>
          <p class="card-title"><%= hairdresser.address%></p>
          <p class="card-title"><%= hairdresser.location%></p>
        </div>
      </div>
    <% end %>
    <div>
      <%= link_to 'Back', root_path %>
    </div>
  </div>
  <div class="col-lg-12">
    <div
      id="map"
      style="width: 100%;
      height: 600px;"
      data-markers="<%= @markers.to_json %>"
      data-mapbox-api-key="<%= ENV['MAPBOX_API_KEY'] %>"
    ></div>
  </div>
</div>

在我的Rails应用程序中未从Mapbox显示地图

0 个答案: