Question

由于某些原因，InfoWindow正在显示滚动条以及内容，我试图将自定义宽度和高度设置为InfoWindow，但它没有显示出来。我从这里尝试了解决方案 Google Map Infowindow not showing properly

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

点击1（有滚动条）
点击3（甚至不安）

感谢您的帮助。

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

Answer 2

要隐藏滚动条，请为您的内容提供高z索引堆栈顺序，例如：

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
}

Answer 3

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

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

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

您也可以将其添加到您的网站，以便为您的所有用户提供解决方案。

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

4 个答案: