谷歌地图+ jQuery：渲染bug

Question

在jquery-ui标签内放置谷歌地图时，地图在某些情况下无法正常显示。重现：

1. 转发here
2. 点击“列表”链接
3. 调整浏览器窗口的大小
4. 点击“地图”链接

观察一些地名覆盖正确绘制，但其他地图则没有。我实际上已经删除了所有jquery-ui的东西以限制问题的范围，它似乎只是display：hide / display：block的应用程序导致问题。

更新

偶尔也会出现错误，就像在display：none / block之间切换一样 - 例如没有调整大小。这似乎是IE（8）中最常见的。

Answer 1

每次显示地图后，请尝试拨打map.onResize()。

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

Answer 2

来自online docs：

  

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

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

Answer 3

使用jQuery Google Maps plugin与jQuery UI标签有同样的问题。

地图的创建方式如下：

$("#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。

Answer 4

试试这个：

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

使用：

 $("#map").show(1, function () {
          resizeMap();
        });

  

resizeMap（）将调用Google Maps'   特定地图上的checkResize（）。

来源：http://jqueryui.com/demos/tabs/#...my_slider.2C_Google_Map.2C_sIFR_etc._not_work_when_placed_in_a_hidden_.28inactive.29_tab.3F