谷歌地图API v3，jQuery UI标签，地图不调整大小 [英] Google Maps API v3, jQuery UI Tabs, map not resizing

问题描述

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

对于Google地图，您还可以在显示标签后像
这样调整地图的大小
：

$ b $

  $（'＃example'）。bind（'tabsshow'，function（event，ui）{
 if（ui.panel .id ==map-tab）{
 resizeMap（）; 
} 
}）; 
  

无论我尝试什么，上面的代码都不适用我。

下面的代码在我选择标签9时会显示一个警告。因此，我知道至少我正确地隔离了正确的触发事件。这里是代码：

$ $ p $ $ $ $ $ $ $#tabs）.bind（ （$ u $）{
if（ui.panel.id ==tabs-9）{
alert（Alert is working）;
}
}）;
}）;

当我改变这段代码以包含推荐的resizeMap（）;命令，它不起作用。相反，它所做的是将字符＃tabs-9附加到url的末尾，然后它甚至不会选择正确的标签9.我在使用此代码时甚至无法看到标签9：

$ b $

  $（function（）{
 $（#tabs）.bind（tabsselect，function（event，ui） {
 if（ui.panel.id ==tabs-9）{
 resizeMap（）; 
} 
}）; 
}）; 
  

最后，当我修改代码以包含不同的resize命令google.maps.event.trigger （地图，'调整大小'）;，它仍然不起作用。相反，它确实允许我选择正确的选项卡9，并且它不会像上述情况那样将字符追加到URL的末尾，但它不会调整地图的大小。地图仍显示为部分完整，右侧有灰色条带。这里是代码：

$ $ p $ $ $ $ $ $ $#tabs）.bind（ tabsselect，function（event，ui）{
if（ui.panel.id ==tabs-9）{
google.maps.event.trigger（map，'resize'）;
}
}）;
}）;

我有什么想法可以尝试下一步？我很难过。感谢。

解决方案

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

 $（function（）{
 $（＃myTabs）。tabs（{
 show：function（e，ui）{
 if（ui .index == 0）{
 google.maps.event.trigger（myMap，resize）; 
} 
} 
}）; 
}）; 
  

您应该测试 ui.index 包含您的Google地图的面板的基于0的索引，当然还包括对 myMap 和 #myTabs 的更新引用。 映射对象文档，了解更多关于调度resize事件触发器的信息。

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.

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

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

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

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.

这篇关于谷歌地图API v3，jQuery UI标签，地图不调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！