Google maps 如何在Google map Javascript V3中从Google map bubble中删除滚动条

我已经使用GoogleMapJavaScriptV3API来显示地图。但我有一个地图气泡的问题。当气泡中的信息超过特定高度时，将向气泡中插入滚动条

如何删除这些滚动条并根据其内容为气泡指定动态宽度和高度

或者，我如何设计自己的自定义气泡，使其根据内容的宽度和高度动态变化

提前谢谢。

---

查看maxwidth

如果您的信息窗口中像我一样有图像，请尝试在设置信息窗口内容的地方使用一些内联样式。我发现在img标签中添加

display:block

可以解决我的问题

在FF、IE9、Opera、Safari和Chrome上测试

例如：

    var html = "<img style=\"display:block;\" src=\""+image+"\"/>"

var html=“”

多亏了chromes element inspector，我可以看到您提供的信息窗口内容始终包装在。。。如果您有滚动高度，设置maxWidth似乎不会停止水平滚动条。我决定我需要破解父元素并关闭水平滚动，即overflow-x:hidden

在您提供的html中放置一个id标识符，并在infoWindow加载后（需要使用addListener）查找该元素（在这里使用jQuery）。从元素跳转到父元素，并将其overflow-x属性设置为hidden，然后删除水平滚动条

这当然是一个黑客行为——如果谷歌InfoWindowHTML代码发生变化，可能会停止工作——希望到时候也会有更好的解决方案

//assume you have a marker already called marker

google.maps.event.addListener(marker, 'click', function(){  

    var _info = new google.maps.InfoWindow({content: '<div id="infoWindow">content that is vertically large...</div>' });

    google.maps.event.addListener(_info, 'domready', function(){
        $(document).find('#infoWindow').parent().css('overflow-x', 'hidden' );

    });

    _info.open( map, marker ); 
} );

//假设您已经有一个名为marker的标记
google.maps.event.addListener（标记'click'，函数（）{
var_info=new google.maps.InfoWindow（{content:'垂直大的内容…'）；
google.maps.event.addListener（_info，'domready'，function（）{
$（文档）.find（'#infoWindow'）.parent（）.css（'overflow-x'，'hidden'）；
});
_信息打开（地图、标记）；
} );

我发现firefox会重新计算元素的高度。例如：

第一个时间元素被添加到dom中，它计算出类似于默认高度的值，让它为100px

然后gmaps获取这个高度并将其放入infowindowwrapper，高度=100px

然后firefox获取并应用此元素的样式（例如字体大小），并基于此计算的样式放置height属性，例如height=130px，但infowindow wrapper height=100px已由gmap脚本设置

我发现的解决方案有点难看，但它是有效的，我们应该在firefox重新计算元素高度后，制作gmaps脚本来重新计算infowindow包装器的高度

infowindow.setContent(data);
infowindow.open(map, marker);
infowindow.close();
setTimeout(function (){
    infowindow.open(map, marker);
}, 1);

---

我也遇到了同样的问题，但仅通过调整包装中的字体大小和行高就解决了问题。

也有类似的问题-滚动条出现在带有文本内容的弹出窗口中，有时在再次关闭和打开弹出窗口后消失，如果我更改页面缩放级别，滚动条也会出现

他很有帮助。我添加了一些CSS字符串，解决了所有额外的滚动条问题：

.gm-style-iw {
   overflow: hidden !important; 
   line-height: 1.35;
   white-space: nowrap;
}

---

我想我可能已经找到了解决办法。在我的例子中，我设置字体大小的方式导致了这个问题。我认为API依赖于像素字体大小来设置初始宽度/高度（因为JavaScript启动太晚，无法计算相对宽度？这不是积极的）

无论如何，您需要在信息窗口中以像素（而不是相对单位）为单位指定字体大小，如：

一旦我将单位设置为像素，我还必须指定（以摆脱默认的宽度设置）：

---

谷歌没有注意到API文档中的格式要求，所以这是一个非常“反复试验”的过程。我仍然觉得这个解决方案不是100%可靠。

Daniel感谢您的帮助回复，我已经检查了maxwidth选项。这是好的包装内容和删除水平滚动。但是如何删除垂直滚动条？是否存在允许对气泡进行动态高度分配的属性？hm可能会有所帮助，你应该给信息窗口一个特定的高度。我也有同样的问题，但我尝试的方法似乎都不起作用（设置图像的宽度也可以，但这不是文本或其他内联内容的解决方案。我遇到了firefox特定的滚动问题。此代码修复了它。谢谢！在我的情况下，这似乎切断了信息窗口右侧的一些内容。这修复了firefox问题并删除了滚动条。我已经使用此代码6个月了它仍然很好：）{+}作为一个»纯«JS解决方案，不需要额外的CSS…

.infowindow p {
  font-size: 15px;
}

.gm-style-iw {
  width: auto !important;   
}