Google Map InfoWindow 在 Google Chrome 中显示滚动条答案

【问题标题】：Google Map InfoWindow displays scroll bars in Google ChromeGoogle Map InfoWindow 在 Google Chrome 中显示滚动条
【发布时间】：2013-11-26 02:52:42
【问题描述】：

出于某种原因，InfoWindow 会随内容一起显示滚动条，我尝试为 InfoWindow 设置自定义宽度和高度，但它没有显示出来。我从这里尝试了解决方案 Google Map Infowindow not showing properly

请参考以下链接 http://server.ashoresystems.com/~contacth/index.php?option=com_business&view=categoryresult&catid=2

点击 1（有滚动条）
点击3（即使被打扰）

感谢您的帮助。

【问题讨论】：

非常相似的问题在这里：stackoverflow.com/questions/1554893/…

标签： google-maps

【解决方案1】：

我找到了解决方法here。

我做了这个JSfiddle，显示了错误和解决方法。

如果您不想访问外部链接，以下是解决方法说明：

将包装 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;
}

【讨论】：

非常感谢！！只是 line-height 修复了，你需要另外两行吗？
感谢它像魔术一样工作！我了解white-space: no-wrap;，但line-height 和overflow 如何抑制滚动条？
我不记得我为什么需要它们。我在这些 InfoWindows 中有各种内容，例如地址和链接。如果没有其他两条线，它们可能不适合。好吧，只要你不需要它们，就把它们放在外面。
我已尝试使用 infowindow="<div class='info_content'><h3>$each_facility[facility_name]</h3></div>"。但它不适用于这种风格。所以我用<b>替换<h3>
@LuisA.Florit 仍然需要解决方法吗？我的旧 JSfiddle 不再显示该错误。你能创建一个显示错误的小提琴，以便我们讨论修复吗？

【解决方案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
}

【讨论】：

您不需要设置高度，只需要针对信息窗口和任何子 div，例如.gm-style-iw, .gm-style-iw div { overflow:hidden!important; }
只对我有用。其他解决方案是垃圾。所以我投票了。谢谢
.gm-style-iw 选择器非常有用。谷歌地图剥离了所有属性，包括 class='scrollFix' 所以这对我不起作用。我最终得到了这个：.gm-style-iw div * { overflow: hidden !important; line-height: 1.35em; } 这只是为了覆盖由谷歌地图添加的style='overflow:auto'。现在，如果 infoWindow 不能再高，我只会得到滚动条。尝试.gm-style-iw div（不带*）删除所有滚动条。

【解决方案3】：

Google 地图将style="overflow: auto;" 添加到内容根元素并删除所有其他属性，包括您的style=... 或class="scrollFix"。你可以像这样覆盖overflow: auto：

.gm-style-iw div * { overflow: hidden !important; line-height: 1.35em; }

【讨论】：

【解决方案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;
}

您也可以将它添加到您的网站中，以便为您的所有用户提供修复。

【讨论】：