Question

我一直在四处寻找，但我没有发现这样的问题。

Gmaps4rails对我很有用！

插入JQuery选项卡时遇到麻烦。它加载了一半的地图。它实际上看起来像是缺少图片。我可以照常移动/调整大小。但只显示地图的一部分。缺少的部分通常是左/下部分。但空白部分的大小一直在变化。

同时，悬停地图时显示鼠标光标的手在悬停此空白部分时变为箭头（但此部分仍在Google容器内）。

如果我将gmaps容器放在JQuery选项卡之外，它可以完美地运行。有没有人见过这个？

视图

   #tabs-4
     #gmap
       =gmaps("map_options" => { "detect_location" => true, "auto_zoom" => false, "center_on_user" => true, "zoom" => 17},"markers" => { "data" => @json })

非常感谢！

Answer 1

请参阅此链接http://jqueryui.com/demos/tabs/#...my_slider.2C_Google_Map.2C_sIFR_etc._not_work_when_placed_in_a_hidden_.28inactive.29_tab.3F

但在V3中调整大小的方式不同

尝试拨打google.maps.event.trigger(map, 'resize')

修改

我发现的每个方法都指的是JavaScript的变化。我发现http://snipplr.com/view/57003/
的另一种方式
$('#tabs').tabs({ show: function (event, ui) { google.maps.event.trigger(map, 'resize'); } });

Answer 2

虽然这个问题已经有一年了，但它确切地描述了我的体验，但接受的答案对我不起作用。这是最终奏效的......

$('#tabs').tabs({
  activate: function (event, ui) {
    var center = Gmaps.map.map.getCenter();
    google.maps.event.trigger(map, 'resize');
    Gmaps.map.map.setCenter(center);
  }
});

也许我正在使用更新的版本。我需要使用activate：而不是show：并且一旦展开以填充容器，地图就偏离中心，因此需要居中的代码。希望这能节省一些时间！

Answer 3

这是一个常见的问题。您需要确保API已知地图大小（目前它认为它的大小为零）。

在地图可见时触发调整大小事件。来自文档：

当div更改大小时，开发人员应在地图上触发此事件：google.maps.event.trigger(map, 'resize')

Answer 4

好的只是稍微修改了上面发布的内容。如果您使用所选答案，则可能会出现无法正确聚焦地图的错误。 @ SteveO7所说的很有效。我还必须为引导程序稍微调整一下。这是在CoffeeScript中：

$('a[data-toggle="tab"]').on 'shown', (e) ->
  if $(e.target).attr('href') == '#tab2'
    center = Gmaps.map.map.getCenter()
    google.maps.event.trigger map, "resize"
    Gmaps.map.map.setCenter(center)

当iside选项卡时，gmaps4rails只显示地图的一半。知道为什么吗？

4 个答案: