Google Map InfoWindow会在Google Chrome中显示滚动条

Question

出于某种原因,InfoWindow正在显示滚动条以及内容,我试图将自定义宽度和高度设置为InfoWindow,但它没有显示出来.我尝试了Google Map Infowindow无法正常显示的解决方案

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

• 点击1(有滚动条)
• 点击3(甚至打扰)

谢谢你的帮助.

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;
}

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
}