Question

我看到很多人在显示隐藏的div时有调整大小的问题，但我遇到的问题略有不同，需要不同的解决方案。我的谷歌地图工作正常，但我现在正在构建一个向导，一次只显示我的页面的步骤。当我启用隐藏的div时，地图在它显示之前只保持一段时间，有时根本不加载，但是然后我将它移动到隐藏div之外的主体部分并立即加载。我不明白，也没有显示任何错误。请帮忙。刷新地图通常会解决问题，但

<div id="step-3" onshow="setTimeout(google.maps.event.trigger(map, 'resize'), 3000)">
    <h2 class="StepTitle">Step 3 Content</h2>
    <label>Select Job Locations: </label>
    <div id="map-canvas" style="width:100%; height:400px;"></div>
    <br>
    <label>Zip codes in region:</label><small> (manually add zipcodes seperated in comma space form)</small>
    <br>
    <textarea id="zipcodes"style="width:100%;"></textarea><br>
</div>

没有像我想的那样修复它。

Answer 1

我今天遇到了同样的问题，花了好几个小时试图解决它。我有两个问题：

我没有地图对象，因为它是由图书馆创建的。
地图不在Marker内，因此我无法在显示<iframe>之后重新加载地图。

但是我发现每次调整窗口大小时都会显示地图，因为地图上的resize事件会自动触发，所以你所要做的就是触发窗口调整大小事件，一切都会像魔法一样工作。 / p>

使用javascript：

<div>

<div>

在Chrome和Firefox上测试过。用fancybox2库测试。

希望这能帮助像我这样的人，他们不想深入任何API来解决一个简单的问题。

Answer 2

我今天遇到了同样的问题，花了好几个小时试图解决它。我有两个问题：

我没有地图对象，因为它是由图书馆创建的。
地图不在Marker内，因此我无法在显示<iframe>之后重新加载地图。

但是我发现每次调整窗口大小时都会显示地图，因为地图上的resize事件会自动触发，所以你所要做的就是触发窗口调整大小事件，一切都会像魔法一样工作。 / p>

使用javascript：

<div>

<div>

在Chrome和Firefox上测试过。用fancybox2库测试。

希望这能帮助像我这样的人，他们不想深入任何API来解决一个简单的问题。

Answer 3

我不知道它是否适合你的解决方案，但是一个解决方法是将你的map元素在显示时用jQuery附加到div，并在隐藏时删除。不理想，但它可能是一个快速修复。

Answer 4

遗憾的是，调整大小并不总是有效。我使用的技术是在div屏幕外渲染地图，然后在我想要显示它时将其移入。

<div id="offscreenMaps" style="position:absolute;top:-3000px">
   <div id="gMap"></div>
</div>

正常渲染地图;注意地图如果可见，但它的屏幕外。然后显示它。

$('#gMap').appendTo('#visibleDiv');

您还可以避免重新渲染地图的笨拙，因为地图已经渲染。干净，活泼。

谷歌地图在隐藏的div内部时不显示

4 个答案: