使用选项卡时 InfoWindow 高度不正确答案

【问题标题】：InfoWindow height incorrect when using tabs使用选项卡时 InfoWindow 高度不正确
【发布时间】：2012-09-25 20:30:39
【问题描述】：

我正在使用tabber.js 将选项卡添加到我的 InfoWindows，并使用以下代码确保在 InfoWindow 的 DOM 准备好后呈现选项卡：

infowindow.id = marker.markerid;
infowindow.open(map, marker);

google.maps.event.addListener(infowindow, 'domready', function () {
    tabberAutomatic({div: document.getElementById(marker.markerid)});
});

使用 Google Maps API，InfoWindow 的高度是在 InfoWindow打开时根据其内容自动计算出来的，而不是在 DOM 准备好时。结果是 InfoWindow 的大小大约是它应该大小的两倍，因为高度基本上是每个选项卡中所有内容的高度之和。呈现选项卡时，我在 InfoWindow 中留下了很多空白。

所以我需要做的是强制 InfoWindow 在呈现选项卡之后重新计算它的高度。这可能吗？

更新：This Fiddle 说明了我的问题。在这种情况下，如何强制 InfoWindow 正确计算它的高度？显式设置 maxHeight 或等效值不是一种选择，因为 InfoWindow 的内容是动态生成的。

【问题讨论】：

我猜 infoWindow 的高度应该是较高选项卡的大小，还是 infoWindow 会根据活动选项卡调整大小？这听起来像是一个时间问题。我认为您不必强制 InfoWindow 在呈现选项卡后重新计算其高度。
InfoWindow.SetContent() 显然会导致重新计算大小。也许这会有所帮助？
您有正在处理的页面的示例吗？我刚刚在一个复杂的谷歌地图集成上修改了很多东西，如果它与你正在经历的事情有关，我也许可以向你展示信息窗口的 CSS。
@BrianNoah 我用 JSFiddle 链接更新了我的问题。
@castillo.io 我会试试这些想法。

标签： javascript html css google-maps google-maps-api-3

【解决方案1】：

我已经通过以下操作解决了这个问题：

使用 'html:' 属性在标记对象中声明 HTML 内容
在设置实际内容之前创建了一个空叠加层
更新了点击事件的 Overlay 内容并在之后初始化了 tabberAutomatic

您可以在此处查看实时示例：

http://jsfiddle.net/alexcastillo/af6bs/

对于多个标记：

http://jsfiddle.net/alexcastillo/Gk7AM/

注意事项：

必须在循环外创建空白叠加层。
没有需要在 domready 事件上运行 tabberAutomatic 函数。

最好的，

【讨论】：

这对于一个 InfoWindow 来说看起来不错，但我正在处理多个标记，在某些情况下我需要显示多个 InfoWindows（每个标记一个）...我尝试调整代码来处理这个，但它停止工作：jsfiddle.net/af6bs/2
我已经更新了我的答案以涵盖多个标记，请参阅下面的注释。
这太好了，我们越来越近了。但是因为您使用的是单个 InfoWindow 实例，所以一次只能打开一个。我需要能够同时打开多个 InfoWindow（每个标记一个 InfoWindow 实例）。
这听起来像是一个单独的问题。我建议您就此提出一个新问题。
你是对的。我将此标记为答案，我将打开一个新问题来处理多个标记。