Question

使用以下准系统代码：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="map_area" style="width:100%;padding-bottom:100%;"></div>

<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=AIzaSyCfoIZz72NPrAPegHrWxqZtvzGkTASDXMc&sensor=false'></script>
<script type="text/javascript">
    var center = new google.maps.LatLng(38.504806, -122.470542);
    var mapOptions = {
      center: center,
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_area"),  mapOptions);
</script>
</body>
</html>

http://test.wcwddemo.com可用的示例。

在较大的（例如桌面）视口尺寸下，它按预期工作，将地图定位在加利福尼亚州的小镇圣赫勒拿。

如果缩小视口的大小并刷新屏幕，在某些时候（宽度为625像素左右），地图将不再以城镇为中心。相反，该镇似乎集中在地图容器的下边界。

从表面上看，这似乎是一个错误。我错过了什么吗？有解决方法吗？

Answer 1

您必须为map_area设置高度样式。

从docs：，您必须始终在<div>明确

上设置尺寸

Google地图中心在较小的视口大小时失败

1 个答案: