javascript - 使用选项卡时 InfoWindow 高度不正确

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

我正在使用 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 的内容是动态生成的。

最佳答案

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

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

您可以在此处查看现场示例:

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

对于多个标记:

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

注意事项:

  1. 必须在循环之外创建空叠加层。
  2. 不需要在 domready 事件上运行 tabberAutomatic 函数。

最好的,

关于javascript - 使用选项卡时 InfoWindow 高度不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12733457/

相关文章:

javascript - 带有非动态输入字段的动态输入字段插入到两个 mysql 表中不起作用

javascript - 如何使用 Ember 突出显示当前选定的列?

javascript - 如何获取浏览器的高度

css - 使用 CSS 隐藏所选元素的父级

css - IE中提交按钮的渐变背景

javascript - 根据其他输入字段从 json 选择2

javascript - 我如何使用 JSDoc 枚举 "enums"?

html - 调整窗口大小时如何使网站不发生任何变化?

html - CSS 选择器根据结果检查子 div 的属性和样式?

html - 将嵌套文本放入 div