javascript - Mapbox.js 在 Ruby on Rails 中呈现空白

Question

我是 Ruby on Rails、HTML 和 CSS 的初学者，我正在尝试在我的 Rails 应用程序中呈现 Mapbox.js map 。但是， map 没有显示。正如您在图片中看到的，缩放控件确实显示正确。 在尝试解决错误时，我遇到了 this常问问题。我已确认我的访问 token 、 map 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(); 吗？

您还可以通过仅在文档就绪时运行它来检查它是否触发得太快，即

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