jquery - Google Maps API v3、jQuery UI 选项卡、 map 未调整大小

Question

我正在使用 Google Maps API v3，显示在 jQuery UI 选项卡上。当选择显示 map 的选项卡时，我一直在努力触发我的谷歌地图正确调整大小。 jQuery 文档在这里 http://docs.jquery.com/UI/Tabs规定:

For Google maps you can also resize the map once the tab is displayed like this:

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

无论我尝试什么，上面的代码对我来说都不起作用。

以下代码有效，因为当我选择选项卡 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 的末尾，但它不会调整 map 的大小。 map 仍然只显示部分完整，并且右侧有灰色带。这是代码:

$(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 map 的面板的从 0 开始的索引，当然还要更新对 myMap 和 # 的引用myTabs.

请参阅 Map object documentation 的“事件”部分有关调度调整大小事件触发器的更多信息。