如何獲取google-maps InfoWindow以調整其大小以適應內置的內容？

我一直在嘗試使用Google Maps API，但是我在InfoWindow中遇到了問題......它似乎總是太小而不適合我放在它裏面的內容，所以我的內容會溢出InfoWindow而到地圖：如何獲取google-maps InfoWindow以調整其大小以適應內置的內容？

Info Window

它似乎並沒有有所作爲，如果在信息窗口的內容是動態還是靜態，或大或小，內容周圍的白色盒子總是有點太小。

這是我的測試代碼：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
     <style type="text/css"> 
      html { height: 100% } 
      body { height: 100%; margin: 0; padding: 0 } 
      #map-canvas { height: 100% } 
     </style> 
     <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
     <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDuV-Jyz8N6b1fVUVCa1EnbPzgeCs9J5_o&sensor=true"></script> 
     <script type="text/javascript"> 
      var districts = [ 
        { 
         name: 'Test Spot 1', 
         latitude: 29.680894, 
         longitude: -82.298584 
        }, 
        { 
         name: 'Test Spot 2', 
         latitude: 28.323725, 
         longitude: -80.713806 
        } 
       ], 
       addDistrictMarker = function(district, map, infoWindow) { 
        var position = new google.maps.LatLng(district.latitude, district.longitude), 
         marker = new google.maps.Marker({ 
          position: position, 
          map: map, 
          title: district.name 
         }); 
        google.maps.event.addListener(marker, 'click', function() { 
         infoWindow.close() 

         var $infoWindowContent = $(infoWindow.content), 
          $title = $infoWindowContent.find('#title'); 
         $title.html(marker.title); 
         $infoWindowContent.show(); 
         infoWindow.open(map, marker); 
        }); 
       }, 
       addDistrictMarkers = function(map, infoWindow) { 
        for (var i=0; i<districts.length; i++) { 
         var district = districts[i]; 
         addDistrictMarker(district, map, infoWindow); 
        } 
       }, 
       initialize = function() { 
        var mapOptions = { 
          center: new google.maps.LatLng(27.907058,-81.44165), 
          zoom: 7 
         }, 
         map = new google.maps.Map(document.getElementById("map-canvas"), 
          mapOptions), 
         $infoWindowContent = $('#info-window'), 
         infoWindow = new google.maps.InfoWindow({ 
          content: $infoWindowContent.get(0) 
         }); 
        addDistrictMarkers(map, infoWindow); 
       } 
      google.maps.event.addDomListener(window, 'load', initialize); 
     </script> 
    </head> 
    <body> 
     <div id="map-canvas"></div> 
     <div id="info-window" style="display: none;"> 
      <h1 id="title"></h1> 
      <div id="bodyContent"> 
       <p>A description of some sort...</p> 
       <p> 
        And a link: 
        <a href="http://foo.bar.com">http://foo.bar.com</a> 
       </p> 
      </div> 
      <div style="clear: both;"></div> 
     </div> 
    </body> 
</html>

有沒有一種方法，我可以告訴谷歌的代碼來調整信息窗口，如果/當谷歌的代碼不會自動做呢？或者我只是在我的代碼中有一個愚蠢的錯誤，阻止谷歌正確調整InfoWindow的大小？

來源

2014-01-22 Troy

從個人的經驗：產生通過手動創建的一切內容（內容在容器內部）使用DOM有助於防止過大，儘管我同意這是一項乏味的任務。 –

我發現，明確設置的「高度」的CSS的div作爲風格InfoWindow內容（「＃info-window」對我來說）似乎會導致google的代碼正確地設置信息窗口的大小。

在我而言，我只是用jQuery來計算和改變DIV內容後設置的「高度」的風格：

$infoWindowContent.height($infoWindowContent.height());

我還沒有想出什麼原因導致谷歌大小的窗口（1）靜態內容有同樣的問題，（2）如果/當我動態地改變內容時，改變窗口的大小，他們不會只是沒有足夠的改變。不知何故，谷歌只是錯算了大小。但是，明確設置CSS高度似乎可以解決這個問題。

來源

2014-01-22 23:17:50 Troy

我以前的答案是錯誤的。

問題是，你正在改變信息窗口的屬性content不使用方法getcontent()和setcontent所以infowindow.open()不知道適當的大小。看到這個小變化的代碼不一樣的你（硬編碼標題的變化）：

addDistrictMarker = function(district, map, infoWindow) { 
    var position = new google.maps.LatLng(district.latitude, district.longitude), 
     marker = new google.maps.Marker({ 
      position: position, 
      map: map, 
      title: district.name 
     }); 
    google.maps.event.addListener(marker, 'click', function() { 
     infoWindow.close() 

     var $infoWindowContent = $(infoWindow.content), 
      $title = $infoWindowContent.find('#title'); 

     var iWC = infoWindow.getContent(); 

     iWC = '<div><h1>My Title</h1><div>Body something to be here><p>A description of some sort...</p><p>And a link:<a href="http://foo.bar.com">http://foo.bar.com</a></p></div></div>' 


     //$title.html(marker.title); 
     //$infoWindowContent.show(); 

     infoWindow.setContent(iWC); 

     infoWindow.open(map, marker); 
    }); 
},

結果： enter image description here

來源

2014-01-22 21:53:59

你在哪裏看到這些文檔？我正在查看的文檔（https://developers.google.com/maps/documentation/javascript/infowindows#add）聲明內容選項「包含一個文本字符串*或一個DOM節點*以顯示信息窗口「...無論如何，即使我將其設置爲使用innerHTML，谷歌仍然將窗口大小設置得太小，只是放置一個滾動條。 – Troy

它是[引用]（https://developers.google.com/maps/documentation/javascript/reference#InfoWindowOptions）。無論如何，它可能是'Node'。使用'innerHTML'，我可以很好地獲得infowindow，但是您希望標題發生更改，就像我從代碼中看到的一樣。所以我的回答是錯誤的。我認爲它在創建之後必須與infowindow的內容相關聯。我嘗試了maxWidth更改，但它沒有幫助。 –

使用上面的代碼，我仍然得到滾動條。我不認爲動態更改內容是問題，因爲當內容動態增長時，Google IS會調整InfoWindow的大小。谷歌只是沒有調整足夠的。看到我的其他答案。 – Troy

我結束了：

infoWindowLinea.setContent(infoWindowLinea.getContent());

只是改變了內容之後。這會強制Google地圖重新計算寬度和高度。

來源

2014-03-08 23:08:43 Kzar

我的解決方案是設置內容，打開窗口，然後在觸發domready事件時，將內容的CSS屬性設置爲任何高度，然後強制Google地圖相應地調整InfoWindow的大小。

infoWindow是InfoWindow對象，$infoWindowContents是我想放在那裏的內容的Jquery對象，map是我的Map對象。是被點擊的標記。

infoWindow.setContent($infoWindowContents.get(0)); 

var listener = google.maps.event.addListener(infoWindow, 'domready', function() { 
    // Stop listening, otherwise the listeners stack up if the window is opened again 
    google.maps.event.removeListener(listener); 

    // Set the height on the container to however tall the browser is currently rendering it 
    $infoWindowContents.height($infoWindowContents.height()); 

    // Force Google Maps to recalculate the InfoWindow height 
    infoWindow.setContent($infoWindowContents.get(0)); 
}); 

infoWindow.open(map, marker);

（我張貼相同的解決方案在一個類似的問題Google Maps API v3: InfoWindow not sizing correctly）

來源

2014-07-11 21:42:54 tremby

我用這個達到同樣的目的：

infoWindow.setContent("<div style = 'display:inline-block'>" + <YOUR_CONTENT> + "</div>");

來源

2015-04-26 17:23:20 smartmouse

如何獲取google-maps InfoWindow以調整其大小以適應內置的內容？

回答

相關問題