Google Maps API v3、jQuery UI 选项卡、地图未调整大小 [英] Google Maps API v3, jQuery UI Tabs, map not resizing

问题描述

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

I am using Google Maps API v3, being displayed on a jQuery UI Tab. I have been struggling with triggering my google map to resize correctly when the tab displaying the map is selected. The jQuery documentation here http://docs.jquery.com/UI/Tabs provides that:

对于谷歌地图，您还可以调整大小标签显示后的地图这个:

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

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

No matter what I try, the above code will not work for me.

以下代码的工作原理是在我选择选项卡 9 时显示警报.因此，我知道至少我正确地隔离了正确的触发事件.代码如下:

The following code works insofar as it will display an alert when I select tab 9. For this reason, I know that at least I am correctly isolating the right trigger event. Here is the code:

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

当我更改此代码以包含推荐的 resizeMap() 时；命令，它不起作用.相反，它所做的是将字符#tabs-9"附加到 url 的末尾，然后它甚至没有选择正确的选项卡 9.当我使用此代码时，我什至看不到选项卡 9:

When I alter this code to include the recommended resizeMap(); command, it does not work. Instead, what it does is append the characters "#tabs-9" to the end of the url, and then it does not even select the correct tab 9. I cannot even see tab 9 when I use this code:

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

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

Finally, when I alter the code to include a different resize command "google.maps.event.trigger(map, 'resize');", it still does not work. Instead, it does allow me to select the correct tab 9, and it does not append the characters to the end of the URL as in the case above, but it will not resize the map. The map still display only partially complete and has gray bands on the right. Here is the code:

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

有什么想法我接下来可以尝试吗?我难住了.谢谢.

Any ideas what I can try next? I'm stumped. Thanks.

推荐答案

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

Add the following to your tabs constructor:

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

您应该针对包含您的 Google 地图的面板的基于 0 的索引测试 ui.index，当然还要更新对 myMap 和 # 的引用myTabs.

You should test ui.index for the 0-based index of the panel that contains your Google map, and of course update references to myMap and #myTabs.

请参阅地图对象文档 有关调度调整大小事件触发器的更多信息.

See the Events section of the Map object documentation for more information about dispatching a resize event trigger.

这篇关于Google Maps API v3、jQuery UI 选项卡、地图未调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！