谷歌地图+ jQuery:渲染bug

Question

在jquery-ui选项卡中放置谷歌地图时,地图无法在某些情况下正确显示.重现:

1. 去这里
2. 点击"列表"链接
3. 调整浏览器窗口的大小
4. 点击"地图"链接

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

UPDATE

偶尔也会出现错误,只是在display:none/block之间切换时 - 例如没有调整大小.这似乎是IE中最常见的(8).

Answer 1

尝试这个：

  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 地图的 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