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

本文介绍了嵌套在 div 标签中时，地图未显示在 Google Maps JavaScript API v3 上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时删除！！

我正在尝试将显示地图的 div 标记 (<div id="map-canvas"></div>) 放在里面另一个 div，但它不会那样显示地图.它是 CSS 还是 JavaScript 问题?或者这只是 API 的工作方式?

这是我的带有嵌套 div 的代码:

解决方案

将 style="width:100%; height:100%;" 添加到 div 看看效果

不是 #map_canvas 而是主 div

示例

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

I'm trying to put the div tag that shows the map (<div id="map-canvas"></div>) inside another div, but it doesn't show the map that way. Is it a CSS or a JavaScript problem? Or is it just the way the API works?

Here's my code with the the nested 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>

解决方案

Add style="width:100%; height:100%;" to the div see what that does

not to the #map_canvas but the main div

example

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

There are some other answers on here the explain why this is necessary

这篇关于嵌套在 div 标签中时，地图未显示在 Google Maps JavaScript API v3 上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..