5

我正面临谷歌地图信息框的奇怪行为。我将 maxWidth 调整为 0 以允许信息框大小调整为内容，但我总是得到一个 236px 的信息框。

var infobox = new InfoBox({
    maxWidth:0
    ,pixelOffset: new google.maps.Size(5, 10)
    ,isHidden:false
    ,closeBoxURL:""
    ,pane: "floatPane"
    ,enableEventPropagation: false
    ,Zindex: null
});

如果我在 css 文件中调整信息框宽度，如下所示，我会在每个信息框中得到相同的大小。

.infobox {width: 500px;}

我做错了什么？任何想法如何解决这个问题？

4

3 回答 3

2

也可以使用boxStyle对象InfoBoxOptions

boxStyle: {
      whiteSpace: "nowrap"
}
于 2013-01-31T08:53:12.087 回答
1

我遇到了类似的问题，所以我动态检索了最佳宽度和高度，然后相应地设置了我的 infoBox 尺寸。这是一个 jQuery 函数和应该解决此问题的函数的应用程序。我觉得 API 在这方面真的没有给人留下深刻的印象。

getInfoBoxDimensions: function( content ) {
    var sensor = $("<div>").html(content);
    $(sensor).appendTo("body").css({"position" : "absolute", "left" : "-900px"});
    var width = $(sensor).width();
    var height = $(sensor).height();
    $(sensor).remove();
    return new Array(width, height);
},

现在您可以使用以下内容获取 html 内容的高度和宽度：

var infoBoxDimensions = getInfoBoxDimensions(info_box_html);

并使用以下设置您的信息框：

var ib = new InfoBox({
     content : info_box_html,
     boxStyle : {
          width : infoBoxDimensions[0] + "px",
          height : infoBoxDimensions[1] + "px"
     },
     ....
     ....
});

您的 info_box_html 应将其样式设置为“inline-block”。默认情况下，块元素将采用 100% 的宽度，我们只需要内容的确切宽度，而 inline-block 会为我们做到这一点。

希望能帮到你

于 2013-02-05T16:56:09.667 回答
0

Don't know how "correct" this solution but here it goes:

Just set the width and height of the google infobox wrapper to auto and add important to prevent google JS from resizing it:

.gm-style-iw {
    width: auto !important;
    height: auto !important;
    div {
        width: auto !important;
        height: auto !important;
    }
}
于 2015-01-16T07:19:19.943 回答