每个jquery选项卡一个谷歌地图，为什么会有偏移？

我需要在每个jQuery选项卡上有一个独立的映射。为什么第二个选项卡中的地图与第一个选项卡具有相同的中心

请看我的护照

---

我不完全确定原因，但如果你改变：

var tabs = $( "#tabs" ).tabs({
activate: function( event, ui ) {
    ui.newTab.index();

    if (ui.newTab.index() == '0') {
        google.maps.event.trigger(map1, 'resize');

    }
    if (ui.newTab.index() == '1') {
        google.maps.event.trigger(map2, 'resize');
    }
    }
});

致：

---

然后一切按预期进行。地图之间一定有某种互动，但我不确定为什么。我会调查的

这是地图有零尺寸隐藏元素的问题。初始化map2时，包含它的div被隐藏，因此向API报告大小为零，它将贴图居中于div的左上角。触发resize事件可修复大小，但不会重新居中贴图。是的，我刚刚找到一些研究，发现了一个问题：这表明了同样的问题。我的答案是一个合理的解决方案，还是有一个更合适的解决方案？Swires的代码帮助我解决了这个问题并起到了作用。这个问题得到了发展，在使用Internet Explorer的Iframe中，这个技巧似乎没有帮助，请参见：

var tabs = $( "#tabs" ).tabs({
activate: function( event, ui ) {
    ui.newTab.index();

    if (ui.newTab.index() == '0') {
        google.maps.event.trigger(map1, 'resize');

    }
    if (ui.newTab.index() == '1') {
        google.maps.event.trigger(map2, 'resize');
    }
    }
});

var tabs = $( "#tabs" ).tabs({
activate: function( event, ui ) {
    ui.newTab.index();

    if (ui.newTab.index() == '0') {
        google.maps.event.trigger(map1, 'resize');

    }
    if (ui.newTab.index() == '1') {
        google.maps.event.trigger(map2, 'resize');
        map2.setCenter(myLatlng2);
    }
    }
});