如何在Google Maps API上强制重绘？

Question

使用jQuery构建和更新Google Maps API自定义控件叠加层的内容,Google地图有时不会绘制更新的内容.

Main.overlay = $('<div><div style="background:white"><div id="overlay"></div></div></div>').detach();
Main.map.controls[google.maps.ControlPosition.TOP_LEFT].push(Main.overlay[0]);

...

$('#overlay').html('New content');

通过调整窗口大小来调整地图大小将导致显示新内容.将鼠标悬停在新内容上,光标会像新内容一样变化.我试过了

google.maps.event.trigger(Main.map, 'resize');

触发重绘,但由于地图实际上没有改变大小,我猜这是优化的.

如何告诉Google地图强制重绘？或者有什么关于jQuery .html()函数可能导致这个？

在Mac OS X 10.9和iPhone模拟器上的Safari 7.0.2(9537.74.9)上会出现此问题,但在Firefox,Chrome或iOS 6 iPad 2上不会发生此问题.

检查DOM表明正在根据需要进行更改,它们只是没有显示.以下建议在Chrome/Mac上添加强制DOM重绘/刷新功能

$('#overlay').hide().show(0);

解决看起来像Webkit的bug.

Answer 1

我尝试了很多使用 API 和 jQuery 重新绘制地图的方法，但没有一个对我有用。我通过使用“空闲”事件解决了由于异步事件尚未完成而引起的问题，使用它有点像回调。

google.maps.event.addListenerOnce(map, 'idle', function(){
    // do something when all other changes to the map have completed
});