Mapbox.js在Ruby on Rails中呈現空白

Question

我-Ruby on Rails，HTML和CSS的初學者-試圖在我的Rails應用程序中呈現Mapbox.js地圖。 但是，該地圖不會顯示。 如您在圖片中看到的，縮放控件確實顯示正確。 嘗試解決錯誤時，我遇到了此常見問題解答。 我已經確認我的訪問令牌，地圖ID和帳戶使用限制不是問題。

以下是我的代碼：

<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet'/>

<div class="content">
  <% if @points[@unit.name] != nil && @points[@unit.name].length %>

      <div id='map' style="
          position: relative;
          margin-left: -10px;
          bottom: 0;
          width: 700px;
          height: 700px;">
      </div>

      <script type='text/javascript'>
          L.mapbox.accessToken = 'heres-my-access-token';
          var map = L.mapbox.map('map', 'mapbox.satellite').setView([52.214360, 6.860573], 8);
      </script>

  <% end %>

... other <div>s

</div>

<script>
    $('map').show();
    map.invalidateSize();
</script>

我在一個非常大的應用程序中工作，因此問題可能是由樣式或某些原因引起的。 我根據FAQ提示進行了檢查，並且頁面上的元素未在任何地方設置為初始“隱藏”。 我不太確定我的invalidateSize（）命令是否正確放置...

我現在很困-有人有其他想法來解決此問題嗎？

Answer 1

應該$('map').show(); 是$('#map').show(); ？

您還可以通過僅在doc ready上運行它來檢查是否觸發得太早，即

$(function() {
  $('#map').show();
  map.invalidateSize();
});

Answer 2

原來的問題是，由於內容安全策略指令的原因，它不會加載mapbox.js腳本。

我通過瀏覽器控制台找到了這個，之前我從未想過要嘗試。 在這里，我發現了與mapbox相關的錯誤（例如，“由於...而拒絕加載腳本。”。

我通過將Mapbox列入白名單來修復它。