Question

如果标记的信息窗口的内容太长，它将不适合窗口，它将在底部溢出。我该如何解决这个问题？

Answer 1

此问题也可能是在将信息窗口内容附加到地图后应用于信息窗口内容的结果。

例如：字体大小将根据默认字体计算。附加信息窗口后，字体将根据继承的CSS更改，如果更大，则会溢出信息窗口的底部。

如果您不想删除继承的样式（并且大多数情况下不需要），则需要在信息窗口内容中明确地反对继承的样式。

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

Answer 2

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

以上代码可以完成工作！

Answer 3

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

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

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

Answer 4

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

所以这里有一些直接的解决方案，适合任何想要改变InfoWindows或其他样式属性的人。

方法1：CSS

应用CSS规则。它改变了所有信息：

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

或者，如果你有自定义IW模板，这也可以工作：

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

溢出需要！重要，否则它会被通用汽车自己的规则所取代，长期内容可能被切断。最大高度可以在没有重要的情况下工作，但最好还是保持最佳状态。

方法2：内联CSS

如果您使用IW内容的模板，那么选项是每个infowindow内联的硬核样式。你不需要使用！important，因为在这种情况下，GM似乎采取了完整的规则。

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

方法3：Javascript

您始终可以使用JS动态修改内容。您可以使用此方法来定位和修改其他IW元素，例如隐藏IW箭头。

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