谷歌地图上的 Div

Mik*_*ike 1 html google-maps

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

<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> 
Run Code Online (Sandbox Code Playgroud)

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

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

<div id="over_map_right">right hand stuff goes here</div>
Run Code Online (Sandbox Code Playgroud)

显示。

有没有另一种方法可以做到这一点?可以用 iframe 或类似的东西来完成吗?

麦克风

Jef*_*ows 5

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

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

请注意,这height: 400px;会起作用,但height: 100%;会留下空白屏幕。

有多种变通方法可以获取“全屏”地图。最好的跨浏览器将使用某种 jQuery 来map_canvas根据当前窗口大小设置高度,并使用侦听器调整窗口大小以重置高度。