Question

我正面临着谷歌地图信息框的怪异行为。我将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;}

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

Answer 1

您还可以使用boxStyle

中的InfoBoxOptions对象

boxStyle: {
      whiteSpace: "nowrap"
}

Answer 2

我遇到了类似的问题，所以我动态检索了最佳宽度和高度，然后相应地设置了我的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);

并使用以下内容设置您的infoBox：

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

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

希望能帮到你

Answer 3

不知道＆＃34;是否正确＆＃34;这个解决方案，但在这里：

只需将google infobox包装的宽度和高度设置为自动并添加重要信息，以防止google JS调整其大小：

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

谷歌地图信息框 - maxWidth

3 个答案: