谷歌地图信息窗口在Google Chrome中显示滚动条

Question

由于某些原因，信息窗口（InfoWindow）与内容一起显示滚动条，我试图为信息窗口设置自定义宽度和高度，但是并没有显示出来。 我尝试了这里的解决方案 Google地图信息窗口未正确显示 请参考以下链接 http://server.ashoresystems.com/~contacth/index.php?option=com_business&view=categoryresult&catid=2

• 点击1（具有滚动条）
• 点击3（甚至还受到干扰）

感谢任何帮助。

- Dan

---

这里有一个非常相似的问题： https://dev59.com/CbvuzYgBFxS5KdRjTxmu - Simon East

Answer 1

我在这里找到了一个变通方法。

我创建了这个JSFiddle，显示了该bug和一个解决方法。

如果不想访问外部链接，请看下面的解决方法：

将一个包装div添加到您的信息窗口内容中：

var infoWindow = new google.maps.InfoWindow({
    content: '<div class="scrollFix">'+infoWindowContent+'</div>',
    [...]
}).open(map);

使用CSS定义以避免滚动条：

.scrollFix {
    line-height: 1.35;
    overflow: hidden;
    white-space: nowrap;
}

- Philipp Gächter

---

非常感谢！！只是行高问题解决了，您还需要另外两行吗？ - Fausto R.

谢谢，它像魔法一样奏效！我理解 white-space: no-wrap;，但是 line-height 和 overflow 如何抑制滚动条呢？ - ruhong

我记不得为什么我需要它们了。我在这些信息窗口中有各种内容，如地址和链接。也许没有其他两行就不太合适了。好吧，如果你不需要它们，就把它们留出来。 - Philipp Gächter

我尝试使用infowindow = "<div class ='info_content'> <h3> $ each_facility [facility_name] </h3> </div>"。但是它不适用于这种样式。所以我用<b>替换了<h3>。 - Parixit

@LuisA.Florit这个解决方法还需要吗？我的旧JSfiddle不再显示错误。您能否创建一个演示该错误的fiddle，以便我们讨论修复方法？ - Philipp Gächter

@PhilippGächter 我在一个使用JavaScript的Android应用程序中发现了错误，但在Web版本中没有。不知道为什么。 - Luis A. Florit

Answer 2

为了隐藏滚动条，给你的内容设置一个高的z-index堆叠顺序，例如：

var infowindow = new google.maps.InfoWindow({
    content: '<div style="z-index:99999">Message appears here</div>',
});

或者，添加以下样式：

.gm-style-iw {
    overflow:hidden!important;
    height:55px!important; //for 3 lines of text in the InfoWindow
}

- David C

---

你不需要设置高度，只需针对信息窗口和任何子div，例如.gm-style-iw, .gm-style-iw div {overflow:hidden!important;}。 - DGibbs

只有这个对我有效，其他的解决方案都是垃圾。所以我投了它一票。谢谢。 - Abrar Jahin

.gm-style-iw选择器非常有用。Google地图剥离了所有属性，包括class ='scrollFix'，因此对我没有用。最终我得到了这个：.gm-style-iw div * { overflow: hidden !important; line-height: 1.35em; } 这只是为了覆盖由Google地图添加的style ='overflow：auto'。现在，仅当infoWindow无法变高时，才会出现滚动条。尝试使用.gm-style-iw div（不带*）以删除所有滚动条。 - Marcel van der Drift

Answer 3

谷歌地图将style="overflow: auto;"添加到内容根元素，并删除所有其他属性，包括您的style=...或class="scrollFix"。您可以像这样覆盖overflow: auto： .gm-style-iw div * { overflow: hidden !important; line-height: 1.35em; }

- Marcel van der Drift

Answer 4

我有一个能改变滚动条外观的扩展程序。这就是为什么在Google API信息窗口框中出现丑陋的滚动条。

为了摆脱滚动条并具有足够的填充量，我只需将以下代码附加到我的滚动条外观代码即可：

div.gm-style-iw.gm-style-iw-c {
  padding-right: 12px !important;
  padding-bottom: 12px !important;
}

div.gm-style-iw.gm-style-iw-c div.gm-style-iw-d {
  overflow: unset !important;
}

你可以将这个功能添加到你的网站上，以便为所有用户提供修复。

- Jordi Kloosterboer