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

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

下面是我的代碼：

<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（）命令是否正確放置，但...

我現在幾乎卡住了 - 有人有其他想法來解決這個問題嗎？

來源

2017-03-08 Teresa

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

我通過瀏覽器控制檯發現了這一點，我以前沒有想過嘗試過。在這裏，我發現了與mapbox相關的錯誤（例如'拒絕加載腳本，因爲....'

我通過白名單映射框修復了它

來源

2017-03-08 14:17:15 Teresa

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

您還可以檢查，如果這是太快射擊，只運行它的文檔準備即

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

來源

2017-03-08 14:00:43 gwcodes

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

回答

相關問題