谷歌地图InfoWindow显示不需要的滚动条(但只有一次)

Question

我有一个问题,我的InfoWindows显示不正确 - 它显示滚动条虽然它不应该(但只是第一次)!

在我的页面上,我有很多折线路线,我为每条路线添加了一个标记/ InfoWindow.添加了很多标记(在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 Maps条目指定任何CSS,即使这样每次都应该显示错误,而不仅仅是第一次.

我已尝试过这个问题的所有技巧,Google Maps API v3:InfoWindow没有正确调整大小,但似乎没有解决我的问题.

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

Answer 1

将以下内容添加到CSS中:

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

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

您需要使用!important运算符,因为地图样式是内联定义的,而替代方法是使用Javascript进行编辑,但这可能是过度的.

更多!important来自MDN

当在样式声明上使用!important规则时,此声明将覆盖CSS中的任何其他声明,无论它在声明列表中的何处.虽然,重要与特异性无关.使用!important是不好的做法,因为它会破坏样式表中的自然级联,从而使调试变得困难.