2012-06-16 70 views
5

我面臨谷歌地圖信息框的怪異行爲。我將maxWidth調整爲0,以允許信息框大小調整爲內容,但我總是得到一個236px的信息框。谷歌地圖信息框 - maxWidth

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

解決使用(white-space:nowrap;)在CSS文件。 – user1460038

回答

2

也可以使用boxStyle對象在InfoBoxOptions

boxStyle: { 
     whiteSpace: "nowrap" 
} 
1

我遇到類似的問題,所以我檢索到的最佳寬度和高度動態和然後相應地設置我的信息框的尺寸。 這裏是一個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%的寬度,我們只需要我們內容的確切寬度,而內聯塊會爲我們做到這一點。

希望幫助你出來

+0

將div附加到窗口只是爲了獲得寬度,然後刪除是一個壞主意 – fridgerator

+0

對於完整的html信息框,你有更好的方法嗎?設置空白空間並不是一個解決方案 - 所有這些都需要更詳細的內容,特別是帶有圖像,html和多行內容的內容。谷歌地圖AFAIK必須通過寬度和高度,或自動設置它,這不是我們想要的。 –

0

不知道如何「正確」這個解決方案,但這裏有雲:

剛剛成立的谷歌信息框包裝自動的寬度和高度,並添加重要的是防止谷歌JS從調整大小它:

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