26

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

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

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

谢谢你的帮助。

4

4 回答 4

73

我在这里找到了解决方法。

我制作了这个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;
}
于 2014-02-14T14:05:53.390 回答
5

要隐藏滚动条，请为您的内容提供高 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
}
于 2014-02-20T10:46:29.063 回答
2

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

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

于 2016-03-31T20:05:31.420 回答
0

我有一个扩展可以改变我的滚动条的外观。这就是为什么丑陋的滚动条出现在 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;
}

您也可以将其添加到您的网站，以使其成为所有用户的修复程序。

于 2021-02-25T06:15:42.393 回答