調整谷歌地圖以適應div - 神祕像素？

我有一個簡單的頁面佈局，有兩個div - 一個在頂部，一個在底部。底部的div是我希望加載我的Google地圖的位置。我想讓地圖填充底部div，並在窗口大小調整時自動調整大小。調整谷歌地圖以適應div - 神祕像素？

我有一些腳本也可以調整div的高度。它工作正常，但由於某種原因，我必須從整體高度中減去29個「神祕像素」，以使一切正常。

任何想法，這些神祕像素來自哪裏？我使用了Chrome的DOM檢查器，但找不到任何線索。

這裏的頁面上的HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
    <title>Google Maps JavaScript API v3 Example: Geocoding Simple</title> 
    <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" 
     rel="stylesheet" type="text/css" /> 
    <link href="css/jquery.loadmask.css" rel="stylesheet" type="text/css" /> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script type="text/javascript" src="js/jquery.loadmask.min.js"></script> 
    <script type="text/javascript" src="js/map.js"></script> 
</head> 
<body style="height: 0px !important"> 
    <div id="search" style="margin-left: 8px; font-family: Arial, Helvetica, sans-serif; font-size: small"> 
     <h3> 
      New Districts for the 2012 Election</h3> 
     <p> 
      Enter your home address including street address, city and zip code in the boxes 
      below and press the Find My District button. Once you have completed the search, 
      click on the map to display district information. For information about how redistricting 
      may affect you, please go to <a href="http://www.leg.wa.gov/LIC/Documents/EducationAndInformation/Redistricting%20Information%20for%20Voters.pdf" 
       target="_blank">Redistricting Information for Voters</a> (PDF file). 
     </p> 
     <p> 
      Address: 
      <input id="Address" type="text" /> 
      City: 
      <input id="City" type="text" /> 
      State: 
      <input id="State" type="text" disabled="disabled" value="WA" style="width: 25px" /> 
      Zip: 
      <input id="Zip" type="text" style="width: 50px" /> 
     </p> 
     <p> 
      District Type: 
      <input type="radio" id="legislativeLayer" name="legislativeLayer" checked="checked" 
       onclick="Map.setLayer()" />Legislative 
      <input type="radio" id="congressionalLayer" name="legislativeLayer" onclick="Map.setLayer()" />Congressional 
      &nbsp; 
      <input type="submit" value="Find My District" onclick="Map.codeAddress()" /> 
     </p> 
    </div> 
    <div id="map_canvas" /> 
</body> 
</html>

下面是相關的腳本：

// Initialize the map 
initialize: function() { 
    // Resize the map to fit the window 

    Map.resizeMapDiv(); 
    $(window).resize(Map.resizeMapDiv); 
}, 

// Resizes the height of the map div so it fits the window 
resizeMapDiv: function() { 
    $("#map_canvas").height($(window).height() - $("#search").height() - 29); 

    // Notify the map a resize has occurred, and center on that point 

    google.maps.event.trigger(Map.map, 'resize'); 

    if (Map.currentPosition) 
     Map.map.setCenter(Map.currentPosition); 
    else 
     Map.map.setCenter(Map.initialPosition); 
}

來源

2012-03-26 Frank Hoffman

您能否提供該問題的演示？ – 2012-03-26 22:26:06

發佈更新了HTML – 2012-03-26 22:49:26

這不會有太大的幫助，我們至少還需要看到map.js。 – 2012-03-26 23:02:10

使用jQuery的偏移量（）方法嘗試：

$("#map_canvas").height($(window).height() - $("#map_canvas").offset().top));

你29px謎遇到的是瀏覽器導航欄的高度，它包含在$（window）.height（）中。

如果您仍然發現高度延伸窗口大小，您可能必須補償填充/邊距。

$("#map_canvas").height($(window).height() - ($("#map_canvas").offset().top + ($("#map_canvas").outerHeight(true) - $("#map_canvas").height())));

身體上的任何填充或邊距也會影響高度。確保它們也設置爲0px。

<body style="padding:0; margin:0;">

來源

2012-03-26 23:12:40

太棒了，它做到了。謝謝！ – 2012-03-26 23:28:45

調整谷歌地圖以適應div - 神祕像素？

回答

相關問題