2

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

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

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

所以我尝试删除<br/>，即使地址数英里长，一切都可以在没有垂直滚动的情况下工作。所以我认为这<br/>与地址混淆了，所以我测试了一点点，似乎地址会受到地址前面的影响，<br/>但如果地址后面则不会受到影响......

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

BTW CSS 溢出不起作用，我正在使用 API v3

4

4 回答 4

4

这似乎是我长期以来见过的最疯狂的错误之一。

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

#mapE { 文本对齐：中心；字体系列：Arial、Helvetica、sans-serif；颜色：#333; 字体大小：14px；溢出：隐藏；}

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

所以我建议使用另一种基本的 windows 字体而不是 Arial（Tahoma应该没问题，对我来说没有问题）

于 2013-02-09T23:12:06.623 回答
2

如果您将其添加到 CSS 中，这也有效：

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

根据您的信息窗口的内容，它会完全删除丑陋的垂直滚动条。它覆盖了 google api 提供的计算样式。

于 2013-11-11T20:48:02.300 回答
2

所以我和你的情况类似。我希望我的 infoWindow 中的内容滚动（只是 Y 滚动而不是 X 滚动），但我想禁用自动 google API infoWindow 滚动，因为它掩盖了我的内容。像许多人一样，我将我的 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;
}
于 2014-02-27T11:42:48.410 回答
1

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

于 2014-05-19T13:06:57.837 回答