Question

我有一个简单的页面布局，有两个div - 一个在顶部，一个在底部。底部的div是我希望加载Google地图的地方。我希望地图填充底部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);
}

Answer 1

尝试使用jQuery的offset（）方法：

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

您遇到的神秘29px是浏览器导航栏的高度，它包含在$（窗口）.height（）中。

如果您仍然发现高度扩大了窗口大小，则可能还需要偏移填充/边距。

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

身体上的任何填充或边距也会影响身高。确保这些也设置为0px。

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

调整Google地图的大小以适应div - 神秘像素？

1 个答案: