1

使用以下准系统代码：

<!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 像素的宽度），地图不再以城镇为中心。相反，城镇似乎以地图容器的下边界为中心。

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

4

1 回答 1

1

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

来自文档：您必须始终<div>明确设置大小

于 2012-12-23T19:32:45.543 回答