谷歌地图&x2B；jQuery:渲染错误

在jquery ui选项卡中放置google地图时，地图在某些情况下无法正确显示。复制：

去

单击“列表”链接

调整浏览器窗口的大小

单击“地图”链接

请注意，某些地名覆盖图绘制正确，但其他地名覆盖图绘制不正确。实际上，我已经剥离了所有jQueryUI内容来限制问题的范围，而导致问题的似乎只是display:hide/display:block的应用程序

更新

偶尔，当在“显示：无/块”之间切换时，也会出现此错误-例如，没有调整大小。这似乎在IE（8）中最为常见。

试试这个：

  if (window.attachEvent) { 
    window.attachEvent("onresize", function() {this.map.onResize()} );
  } else {
    window.addEventListener("resize", function() {this.map.onResize()} , false);
  }

之后

map_initialize();

因为您必须告诉地图页面已调整大小，这可能是您没有jquery的问题所在

编辑

嗯 移除

if (window.attachEvent) { 
            window.attachEvent("onresize", function() {map.onResize()} );
        } else {
            window.addEventListener("resize", function() {map.onResize()} , false);
        }

并替换您的

$('#map').show();

与：

resizeMap（）将调用Google地图的 在特定地图上选中Resize（）

---

来源：

每次显示地图后，请尝试调用

map.onResize（）

如果在使用display:none隐藏地图时调用它，则可能无法正常工作，因为它的高度和宽度为零。

来自：

使用偏左技术进行隐藏 非活动选项卡面板。例如，在你的 样式表替换 类选择器“.ui选项卡.ui选项卡隐藏”带有

使用is与jQueryUI选项卡存在相同的问题

地图是这样创建的：

$("#google-map").googlemap({
    controls: false,
    labels: true,
    zoom: 9,
    latitude: 51.5,
    longitude: 0,
    debug: false
});

打电话很容易（但不是很快）就解决了

$("#google-map").googlemap().getMap().checkResize();

显示地图

div

后。此外，我还在FF和Safari上测试了这一点

resizeTo(screen.width, screen.height);

---

适用于FF，但不适用于IE或Safari。

理论上听起来不错，但在实践中不适用于我：（（示例更新）您更新的示例对我来说已经没有问题了，我正在使用firefox 3.5。您在使用什么？firefox 3.5.1我将尝试其他浏览器-不知道我是否有一些缓存问题。如果问题仍然存在，我将发布一些屏幕截图，以确认问题是什么。干杯。我更新到了3.5.1，我也没有看到问题，pl轻松发布屏幕截图我在IE8:window.attachEvent（“onresize”，function（）{map.onresize（）}）中的这一行实际上出现了一个错误（应该是“onresize”？）是的，显示：没有问题。这是谷歌地图API v2还是v3？我一直在使用v3，也有类似的问题，但还没有100%解决。我解决了这个问题，让我们看看

$("#google-map").googlemap().getMap().checkResize();

resizeTo(screen.width, screen.height);