Question

我正在使用其中一个折叠div来隐藏我的网页中的谷歌地图。但是，当我触发事件扩展div并显示谷歌地图时，它不会出现。这个问题只适用于IE，所有其他浏览器都可以正常工作。我发现同样的问题与响应一起添加此代码：

google.maps.event.trigger（map，'resize'）;

但我应该放在哪里呢？我放置了一个Javascript函数，当div崩溃但它不起作用时会被调用。我应该用地图名称替换“地图”吗？我从谷歌网站获得谷歌地图的代码作为“iframe”标签，我只是将其粘贴到我的网页...... 请解释一下。

Answer 1

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

适用于使用Maps API的情况。因此，map是对地图对象的引用。

但您没有使用API。您正在使用Google地图中的iframe。

Google地图不喜欢被隐藏在div中。我相信的一个解决方案是让iframe说1x1 px。然后调整div的大小以使其足够大 - 并且可见。

替代方法是给iframe一个src =“about：blank”。然后在显示div之后，将src动态设置为正确的url。这样，当div可见时，地图被动态加载。（这可能更好，因为你不会导致用户加载iframe的东西，即使他们不打开地图）

Answer 2

由于您在问题中说您没有使用Google Maps API，因此您可以执行以下操作：

包裹地图：

<div id="map-wrapper"><iframe src="https://www.google.com/maps/..." /></div>

显示地图时使用此代码（jQuery版本）：

$('#map-wrapper').html( $('#map-wrapper').html() );

Javascript版本：

document.getElementById("map-wrapper").innerHTML = document.getElementById("map-wrapper").innerHTML;

当显示地图时，将重新生成包装器（Google地图iframe）的内容，因此会重新加载。