谷歌地图+ jQuery：渲染bug

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

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

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

UPDATE

偶尔也会出现错误，只是在display：none / block之间切换时 – 例如没有resize。 这似乎是IE（8）中最常见的。

Answer 1

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

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

Answer 2

来自在线文档 ：

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

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

Answer 3

使用jQuery Google Maps插件与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(); 

因为你必须告诉地图页面被resize，也许这就是你没有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