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

【问题标题】：Google map not showing when inside a hidden div谷歌地图在隐藏的 div 内时不显示
【发布时间】：2016-10-02 09:26:17
【问题描述】：

我看到很多人在显示隐藏的 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>

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

【问题讨论】：

请提供一个Minimal, Complete, Tested and Readable example 来证明该问题。

标签： javascript google-maps smart-wizard

【解决方案1】：

当地图的div，或者它的父级，或者它的父级父级（任何前任）具有display:none 样式时，并且您创建了地图，地图视图将无法正确初始化。您必须在地图上触发调整大小事件才能重新初始化地图视图。试着打电话：

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

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

【讨论】：

可以解决问题，但由于某种原因，它不适用于我正在使用 jQuery Smart Wizard 的工具
我从未使用过该工具。有什么问题？
我的 jquery-smart-wizard 隐藏了 div 并显示了制作流程向导的内容。基本上问题是我可以单击检查（这会触发页面调整大小），它会使我的地图立即出现，但我上面的代码并没有像我想象的那样触发调整大小。

【解决方案2】：

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

我没有地图对象，因为它是由库创建的。
地图不在<iframe> 中，所以我无法在显示我的<div> 后简单地重新加载它。

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

在使用 javascript 显示隐藏的 <div> 后试试这个：

window.dispatchEvent(new Event('resize'));

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

希望这可以帮助像我这样不喜欢深入研究任何 API 来解决简单问题的人。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

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

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

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

【讨论】：