jquery - Google Maps InfoWindow 显示不需要的滚动条(但只有一次)

Question

我有一个问题，我的 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);
});

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

错误(带滚动条):

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

正确(没有滚动条):

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

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

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

Answer 1

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

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

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

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

More on !important from MDN

When an !important rule is used on a style declaration, this declaration overrides any other declaration made in the CSS, wherever it is in the declaration list. Although, !important has nothing to do with specificity. Using !important is bad practice because it makes debugging hard since you break the natural cascading in your stylesheets.