Google Maps InfoWindow 显示不需要的滚动条（但只有一次）答案

【问题标题】：Google Maps InfoWindow shows an unwanted scrollbar (but only once)Google Maps InfoWindow 显示不需要的滚动条（但只有一次）
【发布时间】：2014-04-25 12:33:28
【问题描述】：

我的 InfoWindows 显示不正确 - 它显示了一个滚动条，但它不应该（但只是第一次）！

在我的页面上，我有很多折线路线，我正在为每条路线添加一个标记/信息窗口。添加了很多标记（在 Ajax 调用中循环）。

这是我对 InfoWindow 的定义（循环前的单个实例）：

// Define an info window
var infowindow = new google.maps.InfoWindow( { content: "" } );

这是在我添加标记的循环内：

// Set a marker on the last known position
var marker = new google.maps.Marker({
    position: lastLatLng,
    title: "My text",
    map: map,
    icon: iconCar
});

// Click on a marker to open an info window
google.maps.event.addListener(marker,"click",function() {
    infowindow.open(map,this);
    infowindow.setContent(this.title);
});

当我第一次打开地图时（在每个新的浏览器实例中），我注意到 InfoWindow 的标记/显示有一个滚动条 - 我没有把它放在那里，也不应该作为文本放在那里没那么长。

错误（带有滚动条）：

下次（以及所有以下）我单击它时，它会正确显示而没有滚动条。

正确（无滚动条）：

我没有为 Google 地图条目指定任何 CSS，即便如此，它应该每次都显示错误，而不仅仅是第一次。

我已经尝试了这个问题的所有技巧，Google Maps API v3: InfoWindow not sizing correctly，但似乎没有任何方法可以解决我的问题。

请看这个Fiddle demo，它显示了我的问题。如果我关闭所有（Chrome）浏览器，每次都可以重现错误，转到 Fiddle 并单击一条路线（作为第一次单击）。然后它会第一次显示滚动条，但只是第一次。

【问题讨论】：

是滚动条。尤其是在首次打开信息窗口且未完全展开时会发生这种情况。
Google 的 InfoWindow 示例窗口也会出现此问题。我发现第一次开口的高度计算错误（不是每次），也许您可以将其报告为问题。

标签： jquery css google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

将以下内容添加到您的 CSS：

div.gm-style-iw{
  overflow:hidden!important;
}

您看到滚动条是因为包含滚动条的包含元素的默认设置是overflow:auto，并且内容超出了容器的高度。

您需要使用 !important 运算符，因为地图样式是内联定义的 - 替代方法是使用 Javascript 进行编辑，但这可能有点矫枉过正。

More on !important from MDN

当在样式声明中使用 !important 规则时，这声明覆盖在 CSS 中所做的任何其他声明，无论何时它在声明列表中。虽然， !important 无关具有特异性。使用 !important 是不好的做法，因为它使很难调试，因为你打破了你的自然级联样式表。

【讨论】：