嵌套在div标签中时，Map不会在Google Maps JavaScript API v3上显示

ygya80vv 于 2023-04-04 发布在 Java

关注(0)|答案(8)|浏览(309)

我尝试将显示Map（<div id="map-canvas"></div>）的div标记放在另一个div中，但它并没有以这种方式显示Map。这是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>

JavaScript

来源：https://stackoverflow.com/questions/16349476/map-isnt-showing-on-google-maps-javascript-api-v3-when-nested-in-a-div-tag

8条答案

按热度按时间

qf9go6mv1#

问题在于百分比大小。您没有定义父div（新div）的大小，因此浏览器无法向Google Maps API报告大小。为 Package 器div指定特定大小，或者如果其父div的大小可以确定，则为百分比大小。
参见this explanation from Mike Williams' Google Maps API v2 tutorial：
如果你尝试使用style=“width：100%;height：100%”，你会得到一个高度为零的Mapdiv。这是因为div试图是<body>大小的一个百分比，但默认情况下<body>的高度是不确定的。
有很多方法可以确定屏幕的高度，并使用该像素数作为Mapdiv的高度，但一个简单的替代方法是更改<body>，使其高度为页面的100%。我们可以通过对<body>和<html>应用style=“height：100%”来实现这一点。（我们必须对两者都这样做，否则<body>将尝试为文档高度的100%，并且默认高度是不确定的。）
在你的css中添加100%大小到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>

赞(0）回复(0）举报 2023-04-04

p8h8hvxi2#

将style="width:100%; height:100%;"添加到div中，看看会发生什么
不是#map_canvas，而是主div
范例

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

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

赞(0）回复(0）举报 2023-04-04

sulc1iza3#

我解决了这个问题：

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

赞(0）回复(0）举报 2023-04-04

js81xvg64#

给予div的初始高度，并在样式中指定高度的百分比;

#map {
   height: 100%;
}

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

赞(0）回复(0）举报 2023-04-04

ruarlubt5#

在我的例子中，我得到的是灰色背景，结果是在Map选项中包含了缩放值。是的，没有意义。

赞(0）回复(0）举报 2023-04-04

rjee0c156#

巫师
你有没有试过设置额外的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文件中。

赞(0）回复(0）举报 2023-04-04

uajslkp67#

我只是想添加对我有用的东西，我为两个div都添加了高度和宽度，并使用bootstrap使其具有响应性

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

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

为了使col-lg-1工作，添加位于Here的 Bootstrap 引用

赞(0）回复(0）举报 2023-04-04

dffbzjpn8#

要知道，这个问题已经解决了，但上面提供的解决方案可能并不适用于所有情况。
对我来说，

<div style="height: 490px; position:relative; overflow:hidden">
    <div id="map-canvas"></div>
</div>

赞(0）回复(0）举报 2023-04-04

我来回答

嵌套在div标签中时，Map不会在Google Maps JavaScript API v3上显示

8条答案

相关问题

热门标签

最新问答