54

我正在尝试将div显示地图 ( <div id="map-canvas"></div>) 的标签放在另一个标签中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>
4

8 回答 8

47

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

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

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

有一些方法可以确定屏幕的高度，并使用该像素数作为地图 div 的高度，但一个简单的替代方法是更改<body>​​它，使其高度为页面的 100%。我们可以通过对 和 应用 style="height: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>
于 2013-05-02T23:50:33.720 回答
44

添加style="width:100%; height:100%;"到 div 看看有什么作用

不是#map_canvas主 div

例子

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

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

于 2013-05-02T23:52:44.807 回答
23

我解决了这个问题：

    <div id="map" style="width: 100%; height: 100%; position: absolute;">
                 <div id="map-canvas"></div>
     </div>
于 2013-09-24T14:09:55.523 回答
15

固定的

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

#map {
   height: 100%;
}

<div id="map" style="clear:both; height:200px;"></div>
于 2017-04-26T14:44:09.963 回答
10

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

于 2014-12-06T20:55:57.173 回答
5

向导

您是否尝试过设置额外 div 的高度和宽度，我知道在我正在处理 JS 的项目中，除非我已经设置了高度和宽度，否则不会在 div 中放置任何内容。

我使用了您的代码并对高度和宽度进行了硬编码，它会显示给我，没有它就不会显示。

<body>
    <div style="height:500px; width:500px;"> <!-- ommiting the height and width will not show the map -->
         <div id="map-canvas"></div>
    </div>
</body>

我建议要么对其进行硬编码，要么为 div 分配一个 ID，然后将其添加到您的 CSS 文件中。

于 2013-05-02T23:51:17.213 回答
4

我只想添加对我有用的东西，我为两个 div 添加了高度和宽度，并使用引导程序使其响应

   <div class="col-lg-1 mapContainer">
       <div id="map"></div>
   </div>

   #map{
        height: 100%;
        width:100%;
   }
   .mapContainer{
        height:200px;
        width:100%
   }

为了工作添加位于此处col-lg-1的引导参考

于 2017-03-16T22:47:27.980 回答
0

了解这已解决，但上面提供的解决方案可能不适用于所有情况。

就我而言，

<div style="height: 490px; position:relative; overflow:hidden">
    <div id="map-canvas"></div>
</div>
于 2019-08-18T06:27:27.160 回答