height=100% 不渲染 google 地图 api

Question

我正在尝试使用 Google 地图 API。我已经获得授权密钥并粘贴到他们给我们的示例代码中，但即使他们告诉我确保我在地图 div 和body。

我试过了，还是不显示。如果我在地图 div 上放置一个 500 像素的高度，并给 body 一个 100% 的高度，它就可以工作……但我想知道为什么 100% 的高度不会呈现。我正在复制 Google 文档 (https://developers.google.com/maps/documentation/javascript/examples/map-simple) 给我的内容以及视频告诉我要仔细检查的内容。帮助，我非常好奇为什么 100% 高度不会呈现。我想用百分比，这样可以兼容移动设备！

<!doctype html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>Ice Cream</title>

        <!-- Google Docs-->


    <!-- external CSS link -->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>


    </head>


<body>


<div id='map_canvas'> HELLOooo <!--dimensions of map are set in CSS-->
</div>


    <!-- external CSS link -->
    <!-- javascript -->
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDuDCh7Odrr4RUUiAHMyDtfwC2NtySy-64"></script>
        <script src="js/index.js"></script>



</body>
</html>


body, #map_canvas{
    margin:0;
    padding:0;
    height: 100%;



}


  $(function() {
    console.log("hi");

   function initialize() {
        var mapOptions = {
          center: { lat: -34.397, lng: 150.644},
          zoom: 8
        };
        var map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);
      }

      google.maps.event.addDomListener(window, 'load', initialize);

console.log('map');



  });

Answer 1

100% 不起作用的原因是地图需要以特定比例（固定 width 和 height）向您发送图像。现在我可能在这里猜测，但这就是我认为发生的事情。

由于我遇到了类似的问题，我的地图隐藏在选项卡中，所以我编写了这个函数来计算宽度和高度或比率。然后，无论地图所在的容器大小如何，它都会进行调整。它使用 jQuery 所以我只是想 post 它来理解这个想法。

    /**
     * Calculate the dimensions
     */
    calculateMap: function () {
        var self = this,
            parent = this.map.parent(), // jQuery obj
            w, h, id, el;

        // if the container of your map is visible and wrapped it has a certain width and height...
        // if it also has 100% height, it could be collapsed (not wrapped)
        // so you ask the google maps api to load images at 500px width and 0height?
        // if the parent has 0height, the ratio helps to set it properly
        // with debug tools (F12) you can see the parent if it lights up
        if (parent.is(':visible')) {
            w = parent.outerWidth(false);
            h = w * this.settings.options.mapRatio; // 4/3 | 16/9
            this.map.css({ width: w, height: h });
        } else {
            // if your map is invisible after load...
            id = this.onParent.prop('id'); // this id references my tab
            el = this.onParent.prevAll().find('a[href=#' + id + ']'); // trigger of the tab
            // add click event once
            el.one(this.settings.events.onParent, function() {
                setTimeout(function() {
                    self.activate(); // goes back to calculateMap()
                }, 200);
            }.bind(this));
        }
    },

如果您在 resize 事件上触发 calculateMap，您将采用响应式方法。

另外 google 快速向我展示了 this approach ...请注意 iframe 上的固定宽度和高度。

简而言之：

css 中的固定宽度和高度为您提供了最干净的解决方案。如果可行，您可以使用 clearfix，% 中的 padding 或 px 中的 min-height 来获得维度。
对于dynamic/event加载我建议JavaScript或jQuery
或者使用 iframe 和固定的宽度和高度

Answer 2

浏览器需要能够计算非零高度。您还需要将 html 元素的高度设置为 100%：

  $(function() {
    console.log("hi");

   function initialize() {
        var mapOptions = {
          center: { lat: -34.397, lng: 150.644},
          zoom: 8
        };
        var map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);
      }

      google.maps.event.addDomListener(window, 'load', initialize);

console.log('map');



  });

html, body, #map_canvas{
    margin:0;
    padding:0;
    height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id='map_canvas'> HELLOooo <!--dimensions of map are set in CSS-->
</div>

height=100% 不渲染 google 地图 api

height=100% not rendering the google maps api

javascript

html

css

google-maps

height