谷歌地图InfoWindow-仅当使用<br/>

Google maps InfoWindow - vertical scroll appers only when using <br/>

本文关键字：lt gt br InfoWindow- 谷歌地图      更新时间：2023-09-26

我使用的是谷歌地图信息窗口，该窗口填充了来自3个输入字段的文本。第一个输入字段是TITLE，第二个ADDRESS（使用标准的Google自动完成）和第三个DESCRIPTION。所以一切看起来都是用户友好的，我在它们之间添加了<br/>，所以每个输入都在信息窗口中单独显示。我就是这样做的：

return (name || "") + "<br/>" +
       (addressOrCoordinates || "") + "<br/>" +
       (additionalDetails || "");

但当地址稍微长一点时，就会出现垂直滚动，这很奇怪，因为如果你在描述字段中写300个字符，信息窗口就不会显示垂直滚动，它很好地适应了信息窗口的大小。。。

所以我试着删除<br/>，即使地址很长，一切都可以在没有垂直滚动的情况下运行。所以我认为<br/>扰乱了地址，所以我测试了一点点，如果地址在地址前面，地址似乎会受到<br/>的影响，但如果地址在。。。

因此，如果信息窗口包含普通文本，即使有很多文本，即使该文本用<br/>分隔，它也不会显示垂直滚动，但为什么在地址前使用<br/>时会出现垂直滚动？有没有其他方法可以让地址输入到信息窗口中的新行而不出现垂直滚动？

BTW CSS溢出不起作用，我使用的是API v3

这似乎是我很长时间以来看到的最疯狂的bug之一。

我不能告诉你为什么会发生这种情况，但对我来说，当我删除以下CSS的粗体标记部分（字体家族）时，它就起作用了：

#mapE｛text-align:center；font-family:Arial，Helvetica，sans-serif；color:#333；font-size:14px；溢出：隐藏；｝

这不是字体宽度的问题（例如，当我使用Verdana时没有问题，它比Arial宽得多）。API必须在打开infoWindow之前计算它的大小，这似乎是使用Arial时出错的地方。

因此，我建议使用除Arial之外的另一种基本windows字体（Tahoma应该可以，对我来说没有问题）

所以我和你的处境相似。我希望我的infoWindow中的内容滚动（只是Y滚动而不是X滚动），但我想禁用自动谷歌API infoWindow滚动，因为它会掩盖我的内容。和许多人一样，我将信息窗口的内容封装在div中，并给它一个id#info_window。然后我想确保内容有一个最大高度，并进行排列，使其滚动条不会覆盖内容（我需要滚动条只垂直滚动，这是另一个考虑因素）。最后，我使用了这里找到的一个答案，以确保只有我的滚动条显示，而不是自动谷歌滚动条。所以我的CSS最终看起来是这样的：

#info_window{
  width: 350px;
}
.gm-style .gm-style-iw, .gm-style .gm-style-iw a, .gm-style .gm-style-iw span, .gm-style .gm-style-iw label, .gm-style .gm-style-iw div {
  max-height: 280px;
  padding: 0px 10px 5px 5px;
  overflow-y: scroll;
  overflow-x: visible;
}
.gm-style-iw div {
  overflow:visible !important;
}

如果您将其添加到CSS:中，也可以使用

.gm-style-iw div {overflow:visible !important;}

根据信息窗口的内容，它会完全删除难看的垂直滚动条。它覆盖了googleapi提供的计算样式。

我发现在信息窗口的内容中添加white-space: nowrap;似乎也可以解决滚动条的问题。当然，这是否可行取决于实际内容，但它可能是一种选择。

相关文章：