Question

我使用Google地图javascript V3 API来显示地图。但我对地图气泡有问题。当气泡中的信息超过特定高度时，它会将滚动条插入气泡中。

如何删除这些滚动条并指定动态宽度＆amp;根据其内容的高度到泡沫？

或者，我如何设计自己的自定义气泡，使其在宽度和宽度方面具有动态效果。根据内容的高度？

提前致谢。

Answer 1

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

This post很有帮助。我添加了一些CSS字符串，它解决了我所有额外的滚动条案例：

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

Answer 2

如果你的infowindows中有一个像我一样的图像，尝试使用一些内联样式来设置infowindows的内容。我发现在img标签中添加display:block为我解决了问题。

在FF，IE9，Opera，Safari，Chrome上测试。

示例：

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

Answer 3

http://code.google.com/apis/maps/documentation/javascript/overlays.html#InfoWindows

查看maxwidth

Answer 4

感谢chromes元素检查员，我可以看到你提供的infowindow内容总是包含在＆lt; div style =“overflow：auto”＆gt; ..＆lt; / div＆gt;中。如果您有滚动高度，设置maxWidth似乎不会停止水平滚动条。我决定我需要破解父元素并关闭水平滚动，即overflow-x：hidden。

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

这当然是一个黑客 - 如果googles infoWindow HTML代码发生变化，可能会停止工作 - 希望届时还会有更好的解决方案。

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

Answer 5

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

第一次将时间元素添加到dom中，计算默认高度，使其为100px。
然后gmaps获取此高度并将其放入infowindow包装器，height = 100px。
然后firefox抓取应用此元素的样式（例如字体大小），并根据此计算的样式放置height属性，例如height = 130px，但infowindow包装器高度= 100px已由gmap脚本设置。

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

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

Answer 6

我遇到了同样的问题但只是通过调整包装器中的字体大小和行高来设法解决它。

Answer 7

我想我可能已经找到了解决方法。在我的情况下，我设置字体大小的方式导致了问题。我认为API依赖于像素字体大小来设置初始宽度/高度（因为JavaScript触发太晚而无法计算相对宽度？对此不正确。）

无论如何，您需要在infowindow中指定字体大小（以像素为单位）（不是相对单位）。例如：

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

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

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

Google没有在API文档中非常仔细地记录格式化需求，因此这是一个非常好的试验和错误＆＃34;让这个工作的过程。我仍然不觉得这个解决方案是100％可靠的。

如何从谷歌地图Javascript V3中的谷歌地图泡泡中删除滚动条

7 个答案: