地图有时只出现在其 div 的左上角答案

【问题标题】：Map sometimes appears only on upper left corner of its div地图有时只出现在其 div 的左上角
【发布时间】：2012-01-10 12:32:56
【问题描述】：

我正在使用Google Maps API v3 for javascript。在某些情况下，我只能看到左上角的地图。要查看，请尝试转到http://telofast.com/telofun/#stationRanking，然后按多行之一。

【问题讨论】：

【解决方案1】：

当浏览器调整大小并正确设置宽度和高度并引发调整大小事件时，地图将起作用。

解决问题的最快方法是在显示它的 javascript 之后调用 resize 方法（如下）。也许在showDiv('mapDiv'); 之后showScoresAndCenterOn 之后？

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

【讨论】：

【解决方案2】：

要解决此问题，您需要

调整地图大小

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

这有点小技巧，但确实有效。

【讨论】：

【解决方案3】：

我遇到了同样的问题，困扰了我几天，今天我找到了解决方案并且成功了！

在我的例子中，我使用标签来查看页面的不同部分。这不是 jquery ui，我做到了。在一个标签中，我放置了地图的代码。当我单击地图选项卡时，它向我显示了地图，但地图已损坏。终于搞清楚问题和解决办法了。

为了隐藏我的元素，我使用了display:none 属性来显示我使用了display:block 属性。当谷歌地图试图获取容器块的尺寸时，它找到了0 x 0，因为它被隐藏了。所以地图显示为损坏。

然后我将地图选项卡的 css 仅更改为 position:absolute;left:-99999px; 而不是 display:none 并使用 jquery 添加类并在必要时使用上述属性删除。然后代码开始工作！我的地图是固定的。

【讨论】：

就我而言，我通过在“show()”的完整函数上初始化地图来做到这一点：$(currentTab).show({ duration: 0, complete: function(){ if ($(this).prop('id') === 'tab-x') { map.initialize(); } } }); google.maps.event.trigger(map, 'resize') 和 map。 resize() 在这种情况下不起作用。

【解决方案4】：

将容器#Div 宽度设置为 100%.. 这对我有用。

【讨论】：

【解决方案5】：

非常感谢，我遇到了同样的问题。实际上，当您放置 display:none 时，这会在尝试查看谷歌地图时出现问题。我删除了 display:none 并将其更改为屏幕外的位置，当单击按钮时，此位置会更改为屏幕中的某个位置，并且我的地图正确显示

【讨论】：