css - 想要在谷歌地图中有一个 float 窗口。像这样的 : Is there a name for this object?(包含链接/图像。)

Question

[这就是我想要做的:]( https://developers.google.com/maps/documentation/javascript/?csw=1#Custom_Controls )

悬浮窗叫什么？ (表示 basemap ，带有下拉列表。)

既不是over lay，也不是infowindow，那是什么？

Answer 1

这是一个 div，他们将其设计为 float 在 map Pane 上。如果您检查该元素，您会看到:

<div class="open visible" id="panel">
    <div class="mtam-title">
        <a href="#" id="minimize"></a>
        <div id="panel-title">Base Maps</div>
    </div>
    <div id="panel-body">
        <div class="banner basemaps-banner">
            <div class="g-plusbtn">
                <div id="___plusone_1" style="text-indent: 0px; margin: 0px; padding: 0px; background: transparent none repeat scroll 0% 0%; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 24px; height: 15px;">
                    <iframe title="+1" data-gapiattached="true" src="https://apis.google.com/u/0/se/0/_/+1/fastbutton?usegapi=1&amp;annotation=none&amp;size=small&amp;origin=https%3A%2F%2Fembed-dot-more-than-a-map.appspot.com&amp;url=https%3A%2F%2Fembed-dot-more-than-a-map.appspot.com%2Fdemos%2Fbasemaps&amp;gsrc=3p&amp;ic=1&amp;jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en_GB.tbkZX74SaQs.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Ft%3Dzcms%2Frs%3DAGLTcCOYzemCn6PkYhgzRa3g2KtXX0dBpg#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh&amp;id=I0_1433919884595&amp;parent=https%3A%2F%2Fembed-dot-more-than-a-map.appspot.com&amp;pfname=&amp;rpctoken=31017501" name="I0_1433919884595" id="I0_1433919884595" vspace="0" tabindex="0" style="position: static; top: 0px; width: 24px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 15px;" scrolling="no" marginwidth="0" marginheight="0" hspace="0" width="100%" frameborder="0"></iframe>
                </div>
            </div>
        </div>
        <div class="section section-text">
            <p>
                For the last decade, we've obsessed over building great maps—maps that are comprehensive, accurate, and easy to use.
            </p>
        </div>
        <div class="section">
            <div class="tabs"><a class="active" href="#">Base Maps</a><a href="#">Styled Maps</a></div>
        </div>
        <div class="">
            <div>
                <h2>Go Further</h2>
                <ul style="display: block;">
                    <li><a class="active" href="/demos/basemaps/new-york">New York</a></li>
                    <li><a href="/demos/basemaps/hong-kong">Hong Kong</a></li>
                    <li><a href="/demos/basemaps/search">Search</a></li>
                </ul>
                <ul style="display: none;">
                    <li><a href="/demos/basemaps/sydney">Sydney</a></li>
                    <li><a href="/demos/basemaps/tokyo">Tokyo</a></li>
                    <li><a href="/demos/basemaps/san-francisco">San Francisco</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

还有:

#panel.visible {
    right: 20px;
}
#panel.open {
    top: 20px;
}
.section-demos #panel {
    display: block;
}
#panel {
    position: absolute;
    z-index: 1000;
    top: 0px;
    right: -500px;
    width: 270px;
    background: #FFF none repeat scroll 0% 0%;
    border-radius: 5px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.61);
    display: none;
}