我正在尝试将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>
3 回答
慕丝7291255
TA贡献1859条经验 获得超6个赞
问题在于百分比大小。您没有定义父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中的正文中
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>
当年话下
TA贡献1890条经验 获得超9个赞
您是否尝试过设置额外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/150
提交
取消