Question

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

这是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）我初始化＆amp;在地点上显示带有标记的谷歌地图。

它工作正常并且看起来很棒，但问题是mainFormContainer超过了谷歌地图（左下角）和地图数据（右下角）的Google徽标。由于div是透明的background-color: rgba(0, 0, 0, 0.6);，因此底层数据不会被隐藏，我使用此解决方案（Responding to links under an overlay div）来使下面的链接可以点击。

但是，因为我的div不透明，所以这些数据不太明显，我不确定它是不是一个问题。我想知道是否有一个解决方案来添加一些填充到谷歌徽标＆amp;地图的右下方数据？

我已经看到你可以在ios（https://developers.google.com/maps/documentation/ios/map#map_padding）上做到这一点，但我没有发现任何与javascript API等效的内容

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

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

但是由于它在谷歌地图中添加了一个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可能会被解决（至少自动完成工作没有问题作为控件，我已经向小提琴添加了自动完成以演示它）。问题＃2应该可以通过CSS解决。

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

1 个答案: