Question

我是javascript的新手，我需要你的帮助，将谷歌地图设置为div元素，这是另一个div元素。如果div元素没有嵌套，这是有效的代码：

function initialize() {

var myOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

但是，如果我有嵌套的div，它不起作用：

<body onload="initialize()">
<div id="main">
    <div id="map_canvas" style="width:100%; height:100%"></div>
</div>
</body>

如何解决这个问题？

Answer 1

经过一些测试后，我得出结论，你需要为你的id="main" div设置一个高度

style="width:100%; height:100%"

因为它是地图的容器，没有定义的高度，所以不会出现任何内容。这就像滚下窗帘一样，地图不会单独推下它。

我假设你已经有了类似的东西，因为地图的工作没有嵌套，但我会再次提到它：

<style type="text/css">
  html, body {height:100%}
</style>

Answer 2

Google地图需要其画布的静态高度和宽度。如果父div没有静态大小，则不应使用％作为高度和宽度。此外谷歌地图有一个错误，它无法加载隐藏的div。（如果这样做，你需要一些技巧）

如何在另一个div中设置div到div？

2 个答案: