猿问

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

我正在尝试将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>


开满天机
浏览 651回答 3
3回答

慕丝7291255

问题在于百分比大小。您没有定义父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％的大小添加到HTML和CSS中的正文中&nbsp; &nbsp; html, body, #map-canvas {&nbsp; &nbsp; &nbsp; &nbsp; margin: 0;&nbsp; &nbsp; &nbsp; &nbsp; padding: 0;&nbsp; &nbsp; &nbsp; &nbsp; height: 100%;&nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; }内联添加到没有id的所有div中：<body>&nbsp; <div style="height:100%; width: 100%;">&nbsp;&nbsp; &nbsp; <div id="map-canvas"></div>&nbsp; </div></body>
0

当年话下

您是否尝试过设置额外div的高度和宽度，我知道在我正在使用JS进行的项目中，除非已经设置了高度和宽度，否则不会在div中放置任何内容。我使用了您的代码，并对高度和宽度进行了硬编码，但对我来说却显示出来了，没有它就不会显示出来。<body>&nbsp; &nbsp; <div style="height:500px; width:500px;"> <!-- ommiting the height and width will not show the map -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div id="map-canvas"></div>&nbsp; &nbsp; </div></body>&nbsp;我建议您对其进行硬编码或为div分配一个ID，然后将其添加到您的CSS文件中。
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答