嵌套在 div 标签中时，地图未显示在 Google Maps JavaScript API v3 上

IT技术 javascript google-maps-api-3
2021-02-08 15:52:41

我试图将div显示地图 ( <div id="map-canvas"></div>)的标签放在 another 中div，但它不会那样显示地图。它是 CSS 还是 JavaScript 问题？或者这只是 API 的工作方式？

这是我的嵌套代码div： 

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
        html, body, #map-canvas {
            margin: 0;
            padding: 0;
            height: 100%;
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
    </script>
    <script>
        var map;
        function initialize() {
          var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(-34.397, 150.644),
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          map = new google.maps.Map(document.getElementById('map-canvas'),
              mapOptions);
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body>
    <div> <!-- ommiting this div will show the map -->
        <div id="map-canvas"></div>
    </div>
</body>
</html>
6个回答

问题在于百分比大小。您没有定义父 div（新的）的大小，因此浏览器无法向 Google Maps API 报告大小。如果可以确定其父级的大小，则为包装器 div 提供特定大小或百分比大小将起作用。

请参阅Mike Williams 的 Google Maps API v2 教程中的解释：

如果您尝试在地图 div 上使用 style="width:100%;height:100%" ，则会得到一个高度为零的地图 div。那是因为 div 试图成为 大小的百分比<body>，但默认情况下<body>具有不确定的高度。

有多种方法可以确定屏幕的高度并将该像素数用作地图 div 的高度，但一个简单的替代方法是更改<body>使其高度为页面的 100%。“：100％的高度”，以这两个我们可以通过应用样式=做到这一点<body>和<html>。（我们必须对两者都这样做，否则会 <body>尝试成为文档高度的 100%，并且默认高度是不确定的。）

将 100% 大小添加到 css 中的 html 和 body

    html, body, #map-canvas {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
    }

将其内联添加到任何没有 id 的 div：

<body>
  <div style="height:100%; width: 100%;"> 
    <div id="map-canvas"></div>
  </div>
</body>

添加style="width:100%; height:100%;"到 div 看看它做了什么

不是#map_canvas主 div

例子

<body>
    <div style="height:100%; width:100%;">
         <div id="map-canvas"></div>
    </div>
</body>

这里还有其他一些答案解释了为什么这是必要的

是的，为映射父容器分配尺寸修复了它，谢谢！
2021-04-07 15:52:41

我用以下方法解决了这个问题：

    <div id="map" style="width: 100%; height: 100%; position: absolute;">
                 <div id="map-canvas"></div>
     </div>
该死的，绝对解决这个问题，失去了两个小时的生命：D
2021-03-22 15:52:41

固定的

给出 div 的初始高度并在您的样式中以百分比指定高度；

#map {
   height: 100%;
}

<div id="map" style="clear:both; height:200px;"></div>

在我的情况下，我得到了灰色背景，结果是在地图选项中包含了缩放值。是的，没有意义。

其它你可能感兴趣的问题
上一篇为什么在给它分配其他东西时不通过引用传递这个对象？ 下一篇在新窗口中打开页面而不阻止弹出窗口