javascript - 谷歌地图在隐藏的 div 中不显示

Question

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

<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

本地图的 div，或者它的父级，或者它的父父级(任何前任)具有 display:none 样式，并且您创建 map 时， map View 获胜'正确初始化。您必须在 map 上触发调整大小事件才能重新初始化 map View 。只需尝试调用:

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

在 div 变得可见之后。确保您可以将调整大小触发器设置为一个小的超时时间，当他们单击要显示的 div 时。