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

Posted 2023-05-07

【中文标题】如何在 Google Maps API 上强制重绘？

【英文标题】：How to force a redraw on Google Maps API?

【发布时间】：2014-05-21 14:49:51

【问题描述】：

使用 jQuery 构建和更新 Google Maps API 自定义控件覆盖的内容，Google Maps 有时不会绘制更新的内容。

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 上的 Safari 7.0.2 (9537.74.9) 和 iPhone 模拟器上，但不会出现在 Firefox、Chrome 或 ios 6 iPad 2 上。

检查 DOM 表明更改正在按需要进行，只是没有显示。在Force DOM redraw/refresh on Chrome/Mac添加以下建议

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

解决似乎是 Webkit 错误的问题。

【问题讨论】：

只是猜测：会不会是 z-index-ish？

加载地图后触发调整大小（您现在正在执行此操作）。问题是调整大小时可能无法加载地图。将 $('#overlay').html('New content') 行放在 jquery when() 中，然后将调整大小作为回调。

【参考方案1】：

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

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

【参考方案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');