在我的 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');
});
最佳答案
有同样的问题,但无法检查我是如何解决它的,因为我没有代码库。但解决方案是在显示 map 之前触发 map 的重新渲染/重绘。
我认为你可以在SO上找到解决方案。
在此处查看答案:How do I force redraw
关于javascript - 未激活的 Bootstrap 选项卡中的 Google-Maps-for-Rails,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34547630/