如何设置谷歌地图标记信息窗口最大高度？答案

【问题标题】：How to set Google map's marker's infowindow max height?如何设置谷歌地图标记信息窗口最大高度？
【发布时间】：2009-05-28 07:42:45
【问题描述】：

如果marker信息窗口的内容过长，会塞不进窗口，会在底部溢出。我该如何解决这个问题？

【问题讨论】：

【解决方案1】：

此问题也可能是由于在附加到地图后将继承样式应用于信息窗口内容。

例如：字体大小将根据默认字体计算。附加信息窗口时，字体会根据继承的 CSS 发生变化，如果字体较大，则会溢出信息窗口底部。

如果您不想移除继承的样式（而且大多数情况下您不想），您需要在信息窗口内容中明确地取消继承的样式。

您可以在以下位置找到此问题的出色描述及其解决方案：

【讨论】：

【解决方案2】：

.gm-style-iw{
    max-height: 10px;
}

上面的代码完成了工作！

【讨论】：

您的代码也适用于我，但我需要添加它“！important”。谢谢
请注意，如果内部内容可滚动超过窗口的高度（例如，.gm-style-iw 框盖在地图的高度），则它是内部框（ .gm-style-iw-d) 需要应用最大高度。

【解决方案3】：

如果 InfoWindow 包含图片，它可能会溢出，因为 InfoWindow 的大小是在图片下载之前设置的。如果是这种情况，您需要指定图像的大小，或预加载它。

否则，我只需将内容放入带有滚动条的 div 中：

div.infowindow {
    max-height:250px;
    overflow-y:auto;
}

【讨论】：

【解决方案4】：

接受的答案有点模糊......

因此，对于任何希望更改 InfoWindows 高度或其他样式属性的人来说，这里有几个直接的解决方案。

方法一：CSS

像这样应用 CSS 规则。它改变了所有的信息窗口：

.gm-style-iw {
    max-height: 200px !important;
    overflow: auto !important;
}

或者，如果您有自定义 IW 模板，也可以使用：

#myInfoWindow-content {
    max-height: 200px !important;
    overflow: auto !important;
}

溢出需要有 !important，否则会被 GM 自己的规则取代，长内容可能会被截断。 Max-height 在没有 !important 的情况下也可以工作，但最好还是保留它。

方法2：内联CSS

如果您为 IW 内容使用模板，则可以选择在每个信息窗口内联硬编码样式。

<div id="myInfoWindow-content" style="max-height: 150px; overflow: auto;">
  content
</div>

方法三：Javascript

您总是可以使用 JS 来动态修改事物。您可以使用此方法来定位和修改其他 IW 元素，例如隐藏 IW 箭头。

document.getElementById('myInfoWindow-content').style.maxHeight = '20px';
document.getElementById('myInfoWindow-content').style.overflow = 'auto';

【讨论】：