Mapbox.js 在 Rails 的 Ruby 中呈现空白

Question

我 - Rails、HTML 和 CSS Ruby 的初学者 - 我正在尝试在我的 [=28] 中渲染 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>

我在一个相当大的应用程序中工作，所以问题可能是由样式或其他原因引起的。我根据 FAQ 提示检查，页面上的元素在任何地方都没有设置为初始 'hidden'。我不太确定我的 invalidateSize() 命令是否放置正确...

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

Answer 1

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

您还可以检查它是否触发得太快，只需运行它在文档准备就绪时即可，即

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

Answer 2

原来问题是它不会加载 mapbox.js 脚本，因为内容安全策略指令。

我通过浏览器控制台发现了这一点，这是我以前从未想过要尝试的。在这里我发现了与 mapbox 相关的错误（例如 'Refused to load the script because....'.

我通过将 mapbox 列入白名单来修复它。

Mapbox.js 在 Rails 的 Ruby 中呈现空白

Mapbox.js rendering blank in Ruby on Rails

javascript

css

ruby-on-rails

mapbox