jQuery UI + Gmaps = 问题（至少对我来说）帮助！答案

【问题标题】：jQuery UI + Gmaps = Problems (for me at least) HELP!jQuery UI + Gmaps = 问题（至少对我来说）帮助！
【发布时间】：2010-11-03 19:22:49
【问题描述】：

我一发现它就开始使用 jQuery，它非常强大，但是当我尝试将 Gmaps api 加载到 jQuery UI 带来的选项卡中时，我开始挣扎。奇怪的是，在 IE 6、7、8 中它可以正常工作，但在 Firefox、Safari（我使用的是 mac，但在 windows 中对其进行了测试，它们都给出了同样的问题）地图并没有完全加载。当我单击加载地图的选项卡时，只有部分地图完全可操作，其余部分为灰色且不可点击。请查看下面的链接，然后单击 firefox/safari 和 IE 中的第三个选项卡，您将看到问题。

http://movewithusoverseas.com/index-new.php?z=product-info.html&pid=1

我不知道这是 jQuery UI 代码中的错误还是我做错了什么。如果我从选项卡中加载地图，则地图显示正常。

我与这个问题斗争了一个半星期......任何帮助将不胜感激。

提前致谢。路易斯

【问题讨论】：

标签： firefox jquery-ui google-maps

【解决方案1】：

我以前也遇到过这种情况。我还没有检查你的代码，所以我无法诊断你的问题，但对我来说，问题是 map_canvas div（谷歌地图用来渲染地图的一个）的 HTML/CSS 大小错误。大多数情况下，您在 div 中有一个 div，您需要将内部 div 设置为 width=100% 和 height=100%。

【讨论】：

你以为我要直接给div设置吗？？我会尝试...感谢您的帮助！
我试过了...但它不起作用..它溢出标签并且它没有完全加载地图..

【解决方案2】：

当用户打开第三个标签时，需要调用map.checkResize()。

问题是这样的：当您初始化地图时，第三个选项卡不可见，并且地图的大小不正确。尝试调整浏览器窗口的大小（这称为 checkResize），您会注意到地图会自行更正。

jQuery UI documentation 展示了如何将事件绑定到选项卡的打开。这应该适用于您的页面：

$('#tabs').bind('tabsshow', function(event, ui) {
    if (ui.panel.id == "tabs-3") {
        map.checkResize();
    }
});

更新： Luis 指出您也可以使用偏左技术解决此问题：

.ui-tabs .ui-tabs-hide {
    position: absolute;
    left: -10000px;
}

【讨论】：

如何调用函数？

可以吗？？
Ok... 如果转到 -> movewithusoverseas.com/… 并单击第三个选项卡，问题仍然存在。如果我直接转到 -> movewithusoverseas.com/…，即使没有您的代码，地图也可以正常显示给了我：S
@Luis - 您需要在地图对象上调用 checkResize - map.checkResize()。 If you link straight to the third tab, it works because the map is initialized when the tab is visible.
最后我使用了 jquery doc 提供的 css 方法，它可以工作了！！改变这个： .ui-tabs .ui-tabs-hide { display: none !important; } 为此： .ui-tabs .ui-tabs-hide { position: absolute;左：-10000 像素；感谢您的帮助队友！如果有一天我遇到你，提醒我我欠你一瓶啤酒……或两杯！ :)

【解决方案3】：

我在使用 jquery 选项卡时遇到了同样的问题。但我决定不使用 css 修复，因为它通过将所有选项卡移动到屏幕外来替换所有选项卡的原始隐藏显示属性。我相信这可以被谷歌或其他搜索引擎视为作弊。

无论如何，我创建的代码与上面 Chris B 提交的代码非常相似，只是增加了一个，即 map.setCenter()。因为我的地图在 checkResize() 方法后没有正确居中。

$('#tabs').bind('tabsshow', function(event, ui) {
    if( $('#map').is(':visible') ) {
        map.checkResize();
        map.setCenter(centerPoint, 14);
    }
});

【讨论】：

【解决方案4】：

请注意，API v3 中不再存在 checkResize() 函数。中的等价物是：

google.maps.event.trigger(map, 'resize');

【讨论】：

【解决方案5】：

这里提供的解决方案都不适用于 gmap js。我发现这个可以：

jQuery('a[href="#tabID"]').on('shown.bs.tab', function(e)
{
    var map = new GMaps({
        div: '#gmap-marker',
        lat: -12.043333,
        lng: -77.028333
    });
});

【讨论】：