如何强制 Google Maps API 重新绘制？

Question

使用jQuery构建和更新Google地图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 Maps强制重新绘制？或者是jQuery .html()函数导致了这个问题吗？

这个问题出现在Safari 7.0.2 (9537.74.9)和iPhone模拟器上的Mac OS X 10.9上，但在Firefox、Chrome或iOS 6 iPad 2上不会出现。

检查DOM显示所做的更改是符合要求的，只是没有显示。根据Force DOM redraw/refresh on Chrome/Mac的建议添加以下代码：

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

绕过看起来是 Webkit bug 的问题。

- Avitzur

---

只是猜测：可能是z-index相关的东西吗？ - PDXIII

一旦加载地图，触发调整大小（您现在正在执行此操作）。问题可能是在调整大小时地图尚未加载。将行$('#overlay').html('New content')放入jquery when()中，并将调整大小作为回调函数。 - astroanu

Answer 1

我尝试了很多使用API和jQuery重新绘制地图的方法，但都没有成功。

由于异步事件尚未完成，我通过使用“idle”事件来解决我的问题，有点像回调函数。

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

- Chris Smith

Answer 2

选择以这种方式包装谷歌地图的 div：

map = new google.maps.Map(document.getElementById("map"), {
    zoom: 1,
    center: {lat: 50.84, lng: 4.35},//belgium center in this example(you set your center predefined)

});

每次需要刷新后：

google.maps.event.trigger(map, 'idle');

- Felipe Mora