5

我一直在环顾四周，但我没有发现这样的问题。

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 })

非常感谢！

4

4 回答 4

8

请参阅此链接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 中 resize 的调用方式不同

试着打电话google.maps.event.trigger(map, 'resize')

编辑

我发现的每个方法都指的是 JavaScript 的变化。我找到的另一种方式http://snipplr.com/view/57003/

$('#tabs').tabs({
    show: function (event, ui) {
        google.maps.event.trigger(map, 'resize');
    }
});
于 2012-04-19T13:43:50.977 回答
4

尽管这个问题已有一年之久，但它准确地描述了我的经历，但接受的答案对我不起作用。这是最终奏效的...

$('#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: 并且地图一旦扩展以填充容器就会偏离中心，因此需要居中代码。希望这可以节省一些时间！

于 2013-03-25T23:27:28.427 回答
1

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

当地图可见时触发调整大小事件。从文档：

当 div 改变大小时，开发者应该在地图上触发这个事件：google.maps.event.trigger(map, 'resize')

于 2012-04-19T13:42:05.837 回答
0

好的，只是对上面发布的内容稍作修改。如果您使用选定的答案，您可能会遇到地图未正确聚焦的错误。@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)
于 2013-04-05T07:36:51.847 回答