javascript - 未激活的 Bootstrap 选项卡中的 Google-Maps-for-Rails

Question

在我的 Rails 4 应用程序中，我向主 foo 对象添加了一个位置，并尝试添加 Google-Maps-for-Rails将其形象化。按照 gem 页面上的说明进行操作后，一切都运行良好，而且仍然如此。

我还添加了 JS-tabs of bootstrap这本身也很有效。

但是，一旦我将谷歌地图的嵌入代码放入初始页面上未激活的选项卡中，它就不会自行启动。按 F12(Firefox 开发者控制台)后，它会被激活并按预期工作。

这就是 View 的样子:

<ul class='nav nav-tabs' role='tablist'>
  <li role='presentation' class='active'><a href='#allgemein' aria-controls='allgemein' role='tab' data-toggle='tab'>Beschreibung</a></li>
  <li role='presentation'><a href='#location' aria-controls='location' role='tab' data-toggle='tab'>Lage</a></li>
</ul>

<div class='tab-content'>
  <div role='tabpanel' class='tab-pane fade in active' id='allgemein'>
    SOME INFOS
  </div>

  <div role='tabpanel' class='tab-pane fade' id='location'>
    LOCATION
    <div style='width: 800px;'>
      <div id="map" style='width: 800px; height: 400px;'></div>
    </div>

    <script type="text/javascript">
      handler = Gmaps.build('Google');
      handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
        markers = handler.addMarkers(<%=raw @hash.to_json %>);
        handler.bounds.extendWith(markers);
        handler.fitMapToBounds();
        handler.getMap().setZoom(10);
      });
    </script>
  </div>
</div>

有什么想法为什么会发生这种情况吗？

解决方案:

在 preciz 的帮助下找到了解决方案!

$('#tab_location').on('shown.bs.tab', function (e) {
  google.maps.event.trigger(map, 'resize');
});

Answer 1

有同样的问题，但无法检查我是如何解决它的，因为我没有代码库。但解决方案是在显示 map 之前触发 map 的重新渲染/重绘。

我认为你可以在SO上找到解决方案。

在此处查看答案:How do I force redraw