透明 div 与 Google 的徽标重叠在 Google 地图上

Question

在我网站的主页上有一张大图片，它占了 100% 的宽度和 60% 的高度（它是 div 和 css 背景图片而不是标签）。在这张图片上，有一个带有一些表单输入的黑色透明 div (mainFormContainer)。其中两个输入是绑定到 Google Place autocomplete 的地址字段。

这是HTML代码

<div id="titleContainer" class="splash-container" style="position: relative;" >
    <div id="mapContainer" style="width: 100%; position: absolute;top: 0;"></div>
    <div  id="mainFormContainer" class="splash-bottom">
        <form></form>
    </div>
</div>

基本上我所做的是，当通过单击自动完成建议（javascript 中的事件 place_changed）填充地址时，我初始化并显示带有标记的 google 地图在位置上。

它工作正常，看起来不错，但问题是 mainFormContainer 位于 google 地图的 Google 徽标（左下角）和地图数据（右下角）上方. 由于 div 是透明的 background-color: rgba(0, 0, 0, 0.6); 底部数据未隐藏，我使用此解决方案 (Responding to links under an overlay div) 使下面的 link 可点击。

但是，因为我的 div 不是透明的，所以这些数据不太明显，我不确定这是否会成为问题。我想知道是否有向 google 徽标和地图右下角数据添加一些填充的解决方案？

我看到您可以在 ios (https://developers.google.com/maps/documentation/ios/map#map_padding) 上执行此操作，但我没有找到 javascript API[=19 的等效项=]

我能找到的唯一解决方案是添加一些不可见的 div 作为地图控件以添加填充，但它不适用于底部数据。

map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(createDummyDiv('100%', '20%'));

但是因为它在 google 映射中添加了 div，所以我尝试了以下代码：

map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(cloneSearchBar());
function cloneSearchBar()
{
    var clone = $('#mainFormContainer').clone(true);
    clone.css('width', '100%');
    clone.css('height', $('#mainFormContainer').height());
    console.log(clone[0]);
    return clone[0];
}

这个技巧给我带来了很多新问题:

Google 地点自动完成不起作用（自动完成建议根本不显示）
字体的设计继承自地图而非我的CSS
我有一个带有日期选择器的字段输入，但无法按预期工作。日期选择器出现，但当我点击一个日期时，它没有填写输入。

所以我放弃了这个解决方案。

Answer 1

这些元素有一个共同点属性，它们通过 CSS 放置在：bottom: 0px;

您可以使用它来创建选择器：

#mapContainer div[style*="bottom: 0px"]

要应用填充，您可以在底部使用透明边框：

  #mapContainer div[style*="bottom: 0px"]{
    border-bottom:50px solid rgba(0,0,0,0);
  }

演示：http://jsfiddle.net/doktormolle/m2rumozm/

但我不确定这是否是一个好方法（API 可能会改变），你最好尝试最后的尝试（使用表格作为地图控制）。当您添加原始 #mainFormContainer 而不是克隆时，问题 #1 + #3 可能会得到解决（至少自动完成作为控件可以正常工作，我已经将自动完成添加到 fiddle来证明它）。问题 #2 应该可以通过 CSS.

解决

透明 div 与 Google 的徽标重叠在 Google 地图上

Transparent div overlaping Google's logo on Google maps

javascript

html

css

google-maps

google-maps-api-3