我有一个整页的谷歌地图,我希望能够将一些图像叠加在地图上。到目前为止,我有以下代码:
<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 或类似的东西来完成吗?
麦克风
问题是谷歌地图需要一个具体的height
属性才能工作。
这是一个例子:http : //jsfiddle.net/9qDhX/
请注意,这height: 400px;
会起作用,但height: 100%;
会留下空白屏幕。
有多种变通方法可以获取“全屏”地图。最好的跨浏览器将使用某种 jQuery 来map_canvas
根据当前窗口大小设置高度,并使用侦听器调整窗口大小以重置高度。
归档时间: |
|
查看次数: |
10000 次 |
最近记录: |