谷歌地图如何显示隐藏区域

Question

我希望有人能够就如何在隐藏的 div 中显示谷歌地图提供建议。

我有一个谷歌地图，如果用户单击链接“显示地图”，我想向他们展示。

将地图放在隐藏的 div 中根本不起作用，因此我选择将地图隐藏在位置绝对 css 值为-1000px 上。

这给了我更好的结果，但当我使用 css 将地图带回时，只有一半显示。

http://screencast.com/t/MTMyOGZmNW

有人能给我建议吗？在执行show之后，最好的方法是如何使隐藏的地图变得可见？

希望有人能提供建议。

谢谢

- Lee

Answer 1

你不需要关心绝对定位等问题。只需在必要时隐藏div，然后显示它并调用google.maps.event.trigger(map, 'resize') (v3) 或 map.checkResize() (v2)

在评论中提到的另一种情况：

确保在调用map.fitBounds()之前调用google.maps.event.trigger(map, 'resize')，否则会得到意外的结果。

- Sudhir Jonathan

---

嘿，谢谢。我尝试在V2中使用map.checkResize()，但是出现了“map未定义”的错误。是的，我知道我正在使用v2。有什么建议吗？ - Lee

啊，我明白了。我正在使用一个 jQuery 插件。$.googleMaps.gMap - Lee

你什么时候调用google.maps.event.trigger(map, 'resize')？你能把它放在当你点击链接时隐藏（然后显示）的div的onclick事件上吗？ - Bill

当然可以...只要确保它在div显示后被调用。如果是动画效果，则需要在动画完全完成后调用。 - Sudhir Jonathan

只是想补充一下...如果你一直在使用map.fitBounds()方法，那么你需要确保在这个触发器之后调用它！ - KingCronus

Answer 2

你尝试调用地图的 resize 事件了吗？ Google 地图 API - 地图

- Jay

Answer 3

为什么不在div显示时再延迟渲染地图呢？

粗略代码：

$("button").click(function() {
   $(mapDiv).show();
   new google.maps.Map(mapDiv, opts);
});

- Chris Broadfoot

---

如果它不停地被隐藏和显示呢？难道你不是创建了许多地图对象，却从未销毁它们。 - Mawg says reinstate Monica