未激活的引导选项卡中的 Google-Maps-for-Rails

Posted 2023-05-08

【中文标题】未激活的引导选项卡中的 Google-Maps-for-Rails

【英文标题】：Google-Maps-for-Rails in an unactivated bootstrap tab

【发布时间】：2016-04-05 11:55:21

【问题描述】：

在我的 Rails 4 应用程序中，我向我的主要 foo 对象添加了一个位置，并尝试添加 Google-Maps-for-Rails 以使其可视化。按照 gem 页面上的说明进行操作后，一切正常，现在仍然如此。

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

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

这是视图的外观：

<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');
);

【参考方案1】：

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

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

在这里查看答案：How do I force redraw