Question

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

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

观察一些地名覆盖正确绘制，但其他地图则没有。我实际上已经删除了所有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

谷歌地图+ jQuery：渲染bug

4 个答案: