Mapbox.js在Ruby on Rails上呈现空白

Question

我 - Ruby on Rails，HTML和CSS的初学者 - 我正试图在我的Rails应用程序中渲染Mapbox.js地图。但是，地图不会显示。如图所示，缩放控件确实正确显示。 在尝试解决错误时，我遇到了this常见问题解答。我已确认我的访问令牌，地图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>

我在一个非常大的应用程序中工作，所以问题可能是由样式或其他东西引起的。我根据常见问题解答提示进行了检查，并且页面上的元素没有设置为最初“隐藏”在任何地方。我不太确定我的invalidateSize（）命令是否正确放置了......

我现在几乎陷入困境 - 有人有其他想法来解决这个问题吗？

Answer 1

$('map').show();应$('#map').show();吗？

你也可以通过在doc ready上运行它来检查这是否过早发射，即

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

Answer 2

事实证明，由于内容安全策略指令，它不会加载mapbox.js脚本。

我通过访问浏览器控制台找到了这个，我以前没有想过尝试过。在这里，我发现了与mapbox相关的错误（例如'拒绝加载脚本，因为......'。

我通过将地图框列入白名单来修复它。