2012-02-04 98 views
1

是的。這是Google Maps API v3: InfoWindow not sizing correctly的重複。
然而,沒有對這個問題提供的解決方案的工作對我來說:(

代碼:如何在Javascript中使用Google Maps InfoWindow(v3 API)

//after getting a 'position' object: 
var mapPos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
var mapOptions = { zoom:16, center:mapPos,mapTypeId:google.maps.MapTypeId.ROADMAP }; 
var yourLocationMap = new google.maps.Map(document.getElementById('locationMap'), mapOptions); 

var infoContent = '<div style="width:40px;height:20px;">some information content...</div>'; 
var infoBaloon = new google.maps.InfoWindow({position:mapPos, content:infoContent, maxWidth:40}); 
infoBaloon.open(yourLocationMap); 

這是HTML谷歌地圖創建的信息窗口在地圖上的頂部:

<div style="width: 247px; height: 88px;"> //<-This is actually the size of the info 
window. I have no idea on what basis it decides on these dimensions. 

    //next is the div for the 'X'(close) button: 
    <div style="width: 10px; height: 10px; overflow: hidden; position: absolute; opacity: 0.7; left: 12px; top: 12px; z-index: 10000; cursor: pointer;"> 
     <img src="http://maps.gstatic.com/mapfiles/mv/imgs8.png" style="position: absolute; left: -18px; top: -44px; width: 68px; height: 67px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;"></div><div style="cursor: default; position: absolute; right: 18px; top: 18px; z-index: 2; overflow: auto; width: 213px; height: 54px;"> 
    </div> 

    // I don't know where this div is coming from... :\ 
    <div style="cursor: default; position: absolute; right: 18px; top: 18px; z-index: 2; overflow: auto; width: 213px; height: 54px;"> 
     <div style="overflow: auto;"> 

      **// and then, finally, the div I put in the Content of the InfoWindow: 
      <div style="width:40px;height:20px;">Some content information...</div>** 
     </div> 
    </div> 
</div> 


庵,幫助


備註:#locationMap div的尺寸(未包含在代碼示例中)具有樣式。 地圖的表示方式沒有任何問題 - 只是InfoWindow的表示方式,無論我將其內容設置爲什麼,它總是寬度爲247像素...

+0

難道是247px的信息窗口的最小寬度?我發現的唯一種類的「證據」在本文中: http://www.svennerberg.com/2009/02/working-with-info-windows-in-google-maps/ – 2012-02-04 17:53:43

+0

上述問題解決方案僅僅因爲它適用於Google地圖v2而不起作用。 我使用jQuery來動態更新infowindow大小,但我想它就像修復代碼一樣。所以更好的是停止專注於此並儘可能地改變功能(表示) – Jaykishan 2013-12-31 13:45:08

回答

0

不確定是否有幫助,但我發現實際上有兩件事控制了google地圖中infoWindow的高度。

  1. 信息窗口,並適用於信息窗口內容的CSS的內容(大多數人都深知這一點)
  2. (和什麼可能是最容易混淆)的谷歌地圖畫布本身的高度! !

我有一個設置爲250px高的畫布,無論我如何設置放置在infoWindow中的內容,它仍然是88px的固定高度並出現滾動條。一旦我將畫布放大一點(300px),infoWindow的最大高度也發生了變化。

如果您認爲自己做了一切正確的事情,請調整infoWindow的大小,最後的辦法是讓您的畫布稍大一些。

祝你好運!

相關問題