Google Maps API v3,jQuery UI标签,地图未调整大小

Question

我使用的是Google Maps API v3,显示在jQuery UI标签上.当选择显示地图的选项卡时,我一直在努力触发我的谷歌地图以正确调整大小.这里的jQuery文档http://docs.jquery.com/UI/Tabs提供了:

对于Google地图,您还可以在选项卡显示后调整地图大小,如下所示:

$('#example').bind('tabsshow', function(event, ui) {
    if (ui.panel.id == "map-tab") {
        resizeMap();
    }
});

无论我尝试什么,上面的代码都不适合我.

以下代码可以正常工作,因为它会在我选择tab 9时显示警告.因此,我知道至少我正确地隔离了正确的触发事件.这是代码:

$(function() {
    $( "#tabs" ).bind( "tabsselect", function(event, ui) { 
        if (ui.panel.id == "tabs-9") {
            alert("Alert is working");
        }                                         
    });
});

当我改变这段代码以包含推荐的resizeMap(); 命令,它不起作用.相反,它所做的是将字符"#tabs-9"附加到网址的末尾,然后它甚至不会选择正确的选项卡9.当我使用此代码时,我甚至看不到选项卡9:

$(function() {
    $( "#tabs" ).bind( "tabsselect", function(event, ui) { 
        if (ui.panel.id == "tabs-9") {
            resizeMap();
        }                                         
    });
});

最后,当我改变代码以包含不同的调整大小命令"google.maps.event.trigger(map,'resize');"时,它仍然不起作用.相反,它允许我选择正确的选项卡9,并且它不会像上面的情况那样将字符附加到URL的末尾,但它不会调整地图的大小.地图仍然只显示部分完整,右侧有灰色条带.这是代码:

$(function() {
    $( "#tabs" ).bind( "tabsselect", function(event, ui) { 
        if (ui.panel.id == "tabs-9") {
           google.maps.event.trigger(map, 'resize');
        }                                         
    });
});

我接下来可以尝试的任何想法？我很难过.谢谢.

Answer 1

将以下内容添加到选项卡构造函数中:

$(function() {
    $("#myTabs").tabs({
        show: function(e, ui) {
            if (ui.index == 0) {
                google.maps.event.trigger(myMap, "resize");
            }
        }
    });
});

您应该测试ui.index包含Google地图的面板的从0开始的索引,当然还要更新对myMap和的引用#myTabs.

有关调度resize事件触发器的更多信息,请参阅Map对象文档的Events部分.