如何在 Google 地图上放置带有控件的表单？答案

【问题标题】：How can I position a form with controls over a Google Map?如何在 Google 地图上放置带有控件的表单？
【发布时间】：2012-05-16 18:24:34
【问题描述】：

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

我找到了几个解决这个问题的方法：

How to float a div over a google maps

Div on top of div with google maps api

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

我最新的 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; }

【问题讨论】：

标签： css google-maps html google-maps-api-3

【解决方案1】：

从你的 CSS 中删除这一行：

#wrapper { position: relative; }

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

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

【讨论】：

成功了。由于某种原因，我的 .css 文件也没有正确上传到 FTP。我更改了 .css 的名称，现在它可以工作了。谢谢。