1

我有一个带有控件的小表单，我想将它放置在我的谷歌地图上，就在最左上角。

我发现了几个对这个问题的回应：

如何在谷歌地图上浮动一个div

使用谷歌地图 api 在 div 之上的 div

但是，这些都不适合我。我要么看到没有表单控件的地图，要么只看到表单控件但没有地图。可能是什么问题呢？

我最新的 HTML 和 CSS：

HTML：

<html>
    <body>
    <div id="wrapper">
        <div id="map_canvas"></div>
        <div id="over_map">
            <p>Select something!</p>
            <select>
                <option value="Red">Red</option>
                <option value="Green">Green</option>
                <option value="Blue">Blue</option>
            </select>
        </div>
    </div>
    </body>
</html>

CSS：

html { height: 100%; width: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { position: absolute; top: 10px; left: 10px; height: 100%; width: 100%; }
#wrapper { position: relative; }
#over_map { position: absolute; top: 10px; left: 10px; z-index: 99; }
4

1 回答 1

3

从你的 CSS 中删除这一行：

#wrapper { position: relative; }

地图平移和缩放控件位于左上角，因此请小心放置或禁用这些控件。

关于 jsfiddle 的工作示例：http: //jsfiddle.net/pratie/2sJSg/

于 2012-05-16T19:08:53.577 回答