Google地图+ jQuery：渲染错误 [英] Google map + jQuery: rendering bug

问题描述

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

When placing a google map inside a jquery-ui tab, the map fails to display properly in certain circumstances. To reproduce:

1. 前往此处


2. 点击列表链接


3. 调整浏览器窗口大小


4. 点击地图链接

1. Go here
2. Click the 'list' link
3. Resize the browser window
4. Click the 'map' link

观察某些地名叠加层正确绘制，我实际上已经剥离了所有的jquery-ui东西来限制问题的范围，它似乎只是应用程序的display：hide / display：block导致的问题。

Observe that some of the place name overlays draw properly, but others do not. I've actually stripped out all of the jquery-ui stuff to limit the scope of the problem, and it appears to be just the application of display:hide/display:block that causes the problem.

UPDATE

错误也会偶尔发生，只是在显示之间切换：none / block - eg不会发生调整大小。这似乎在IE（8）中最常见。

The bug also occurs, occasionally, just when toggling between display:none/block - e.g. no resizing occurs. This seems to be most common in IE(8).

推荐答案

使用 jQuery Google地图插件与jQuery UI标签有相同的问题。

Using the jQuery Google Maps plugin is was having the same issue with jQuery UI tabs.

地图的创建方式如下：

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

通过调用

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

显示映射 div 后。我已经测试了这个FF和Safari，此外

After the map div is displayed. I have tested this on FF and Safari, in addition

resizeTo(screen.width, screen.height);

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

Works in FF but not IE or Safari.

这篇关于Google地图+ jQuery：渲染错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！