5

Google マップのインフォボックスの奇妙な動作に直面しています。インフォボックスのサイズをコンテンツに合わせて調整できるように、maxWidth を 0 に調整しましたが、常に 236 ピクセルのインフォボックスが表示されます。

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

次を使用してinfoBoxを設定します。

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

info_box_html のスタイルは「インライン ブロック」に設定する必要があります。デフォルトでは、ブロック要素は 100% の幅を取り、コンテンツの正確な幅のみが必要であり、インライン ブロックがそれを行います。

それがあなたを助けることを願っています

于 2013-02-05T16:56:09.667 に答える
0

この解決策がどのように「正しい」かはわかりませんが、次のようになります。

Google インフォボックス ラッパーの幅と高さを auto に設定し、重要事項を追加して、Google JS によるサイズ変更を防止します。

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