Question

我正在尝试使用JQuery调整Google交通地图的高度。

这是初始化地图的方法（TrafficMapController）：

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 11,
        center: {lat: 50.1795159, lng: 9.040013600000066}
    });
    var trafficLayer = new google.maps.TrafficLayer();
    trafficLayer.setMap(map);
}

以上内容按照文档中的描述执行：

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCXOgZ5cNqC4XNZIi4OjZzoMANgDnA3Tb0&callback=initMap"></script>

这是加载地图后正在执行的高度的调整（DashboardController）：

$(document).ready(function resizeGoogleMap() {
    var bodyheight = $('body').height();
    var headerHeight = $('#page-header').height();
    $('#map').css('height', bodyheight - headerHeight);
})

完整的Html：

<html>
<head>
    <script src="../frameworks/jquery/jquery-3.2.1.js"></script>
    <script src="../frameworks/bootstrap/js/bootstrap.min.js"></script>
    <script defer src="../js/TrafficMapController.js"></script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCXOgZ5cNqC4XNZIi4OjZzoMANgDnA3Tb0&callback=initMap"></script>
    <script defer src="../js/DashboardController.js"></script>
    <link rel="stylesheet" href="../frameworks/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/dashboard.css">
</head>
<body>
    <div class="container-fluid">
        <div class="row page-header" id="page-header">
            <div class="col-md-4 col-lg-4"></div>
            <div class="col-md-4 col-lg-4">
                <p>Info-Dashboard</p>
            </div>
            <div class="col-md-4 col-lg-4" id="refresh">
                <p id="a">Aktualisierung in </p><p id="timer-count">300</p><p id="a"> Sekunden</p>
            </div>
        </div>

        <div class="row">
            <div class="col-md-4 col-lg-4 info-item1">
                <div id="map"></div>
            </div>
        </div>
    </div>
</body>
</html>

CSS：

body {
overflow: hidden;
}

.page-header {
    background-color: #b3b3b3;
    color: white;
    text-align: center;
    font-size: 40pt;
}

.info-item1 {
    padding: 0;
    height: auto;
}

#refresh {
    color: white;
    font-size: 20pt;
    vertical-align: baseline;
    display: inline;
}

#timer-count {
    display: inline;
}

#a{
    display: inline;
    line-height: 77pt;
}

我的问题是，调整大小有时只能正常工作，我无法弄清楚原因。

有时当重新加载页面时，地图的高度是正确的，并且根据需要适合页面，有时高度太小或太大。

如果有人能解释为什么会这样，我将不胜感激。

干杯。

Answer 1

我知道您正在尝试根据身高自动计算#map div高度，但请注意事项：

始终将地图div的高度设置为某个值。通常它100％或默认也会起作用。 #map { height: 100% }
如果您想在用户调整窗口大小时重新调整高度，则需要将resizeGoogleMap()不仅放在文档准备就绪上，而且放在窗口调整大小事件上，例如window.onresize = function(event)
如果您想调整地图高度以使其对移动设备做出响应，请使用媒体查询。 @media only screen and (max-width: 632px) { #map { height: 100px; } }

您提供的代码实际上仍然不是最小和完整的。在这里提问时，请始终尝试在最小的环境中提供完整的代码。您可以删除控制器等的其他链接。在最小和完整的示例中，您可以查看某些代码的jsfiddle。

谷歌交通地图的高度不一致

1 个答案: