1

我有一个整页的谷歌地图，我希望能够将一些图像叠加在地图上。到目前为止，我有以下代码：

<style type="text/css"> 
    html { height: 100% } 
    body { height: 100%; margin: 0; padding: 0 } 
    #map_canvas { height: 100% } 
    #wrapper { position: relative; }
    #over_map { position: absolute; background-color: transparent; top: 10px; left: 10px; z-index: 99; }
    #over_map_right { position: absolute; background-color: transparent; top: 10px; right: 10px; z-index: 99; }

</style>

....

<body>  

<div id="wrapper">

    <div id="map_canvas" style="width:100%; height:100%"></div>

    <div id="over_map">Left hand stuff goes here</div>

    <div id="over_map_right">right hand stuff goes here</div>
</div> 
</body>

这段代码对我来说似乎是正确的，但是当打开它时，我得到一个纯白的屏幕，只有

<div id="over_map">Left hand stuff goes here</div>

<div id="over_map_right">right hand stuff goes here</div>

显示。

还有另一种方法吗？可以用 iframe 或类似的东西来完成吗？

麦克风

4

3 回答 3

5

问题是谷歌地图需要一个具体的height属性才能工作。

这是一个例子：http: //jsfiddle.net/9qDhX/

请注意，这height: 400px;将起作用，但height: 100%;会给您留下一个空白屏幕。

有多种解决方法可以获得“全屏”地图。最好的跨浏览器会使用某种 jQuery 来设置map_canvas基于当前窗口大小的高度，并使用一个监听器来调整窗口大小以重置高度。

于 2013-01-31T01:25:36.153 回答
2

除了 Jeff-Meadows 的回答。

获取全屏地图：

你可以使用 jquery onload 事件

    $(function () {
        $("#map_canvas").css("height", $(window).height());
    });

这将启用全屏

于 2013-11-14T01:23:46.843 回答
0

您可以vh在样式表中使用 CSS 单元。

例如：

#map_canvas {
    height: 100vh;
}
于 2017-09-15T16:52:52.657 回答