放置在 div 内时，Google 地图位置不正确答案

【问题标题】：Google map out of position when placed inside div放置在 div 内时，Google 地图位置不正确
【发布时间】：2012-01-20 10:01:48
【问题描述】：

两个重要的事实：

这就是我所说的“失位”的意思：

有问题的 div 最初有 style="display:none;"（它只在单击链接时显示，JQuery 解决方案）。删除该样式后，地图可以正常工作 - 但是，我需要该样式，因为在单击链接（屏幕截图左侧的链接之一）之前，我不能让该 di> 显示。

谁能建议一种使地图正确显示的方法？

如果没有，也许您可以建议一种方法来使 di> 在单击链接时显示/隐藏而不具有该样式？请注意，它只是以相同方式显示/隐藏的七个 div 之一，因此解决方案必须考虑到这一点。这是我为每个 div 使用的 jQuery（单击链接时显示该 div 并隐藏所有其他 div）：

    <script type="text/javascript"> 
   $(function() {
       $('#show_mapa').click(function() {
           $('#mapa').show();
           $('#podaci').hide();
           $('#udaljenosti').hide();
           $('#pojedinosti').hide();
           $('#slika').hide();
           $('#slike').hide();
           $('#dodaj').hide();
           return false;
       });        
   });
</script>

【问题讨论】：

标签： jquery google-maps

【解决方案1】：

当您在隐藏的 div 中初始化 google 地图时，会发生这种情况。您需要在显示地图对象后调用它的方法以使其正确显示（onResize()）。

how to deal with google map inside of a hidden div (Updated picture)

这可能会有所帮助。

【讨论】：

谢谢，但我自己解决了。从 div 标记中删除样式，而是调用执行相同操作的 javascript 函数 onLoad (document.getElementById('mapa').style.display = 'none';)，它现在可以工作了。不是最优雅的解决方案，但我目前没有时间优雅。

【解决方案2】：

我记得我遇到了同样的问题，实际上使用了 danp 建议的相同修复方法：how to deal with google map inside of a hidden div (Updated picture)

这是另一种选择： 您总是可以添加一个监听器来观察链接上的点击，这就是所谓的“给我看地图”之类的东西。然后当点击链接时，只有在单独的 div 中加载谷歌地图。

我个人更喜欢使用 onResize() 修复的显示/隐藏方式，但如果您愿意，可以尝试其他方法。

祝你好运！

【讨论】：