gmaps4rails却与此地图时iside标签的一半。 任何想法,为什么?(gmaps4rai

2019-07-29 01:49发布

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

Gmaps4rails为我的伟大工程!

麻烦的是,当插入一个jQuery标签。 它加载地图的一半。 实际上,它看起来就像是缺少图片。 我可以移动/调整如常。 但只显示在地图的一部分。 和失踪的部分通常是左/底部。 但是,空白部分的大小而变化的所有时间。

与此同时,示出鼠标光标悬停在地图当手悬停这个空部分时变成箭头(但这一部分仍是谷歌容器内)。

如果我放在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);
  }
});

也许我使用较新版本。 我需要使用激活:不是显示:与地图是偏离中心一旦扩大到填充容器所以需要定心代码。 希望这可以节省有人一段时间!



Answer 3:

这是一个常见的问题。 你需要确保地图的大小是已知的(目前它认为它具有零大小)的API。

触发resize事件时,地图可见。 从文档:

开发人员应该在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)


文章来源: gmaps4rails shows just half of the map when iside tab. Any idea why?