更改 Google 地方信息自动填充结果框的位置答案

【问题标题】：Changing position of Google Places Autocomplete result box更改 Google 地方信息自动填充结果框的位置
【发布时间】：2015-09-17 17:51:48
【问题描述】：

在我正在处理的页面上，Google 地方信息自动填充的结果显示在其应有的位置下方 70 像素处，在搜索框和结果容器的开头之间留下了空隙。

间隙的高度恰好是 Chrome 自动填充功能的确切高度，所以我怀疑自动完成库出于某种原因在计算位置时考虑了该高度，即使我已经设法禁用我的搜索框上的那个功能。

我可以通过覆盖.pac-container 类的top 属性的值（替换API 用1164px 计算的1234px 的值）来解决问题，但我宁愿有一种方法可以动态地或仅基于偏移量而不是硬编码该数字。

有没有办法通过 CSS 或 JavaScript/jQuery 将自动完成结果容器向上移动一定量？

可以在 Google 的documentation 中找到自动完成框中涉及的 CSS 类的列表。

【问题讨论】：

如果我们能看到你的代码就太好了。

标签： javascript jquery css google-maps-api-3 google-places-api

【解决方案1】：

我尝试了很多方法，到目前为止对我最有效的方法是良好的旧（负）边距。

我希望结果菜单显示在顶部，我这样做了：

<style type="text/css">
  .pac-container{
    margin-top: -210px;
  }
</style>

【讨论】：

不幸的是，这不是防弹的。当列表较短时，有时会出现间隙。

【解决方案2】：

下面的 sn-p 对我有用。 在此最初，它将删除 DOM 中任何位置之前的 pac-container div。稍后，它会尝试在自动完成对象中找到 pac-container div 元素，并将 pac-container div 元素放在另一个 div 中，在这种情况下它是 “图书帐单地址”

 $(".pac-container").remove();
 autocomplete = new google.maps.places.Autocomplete(input);
          if(id_val == 'payment-address'){
            setTimeout(function(){
              if(autocomplete.gm_accessors_ != undefined){
                var container_val = autocomplete.gm_accessors_.place.qe.gm_accessors_.input.qe.H
                autocomplete.gm_accessors_.place.qe.gm_accessors_.input.qe.H.remove();
                $('#book-billing-address').append(container_val);
              }
            }, 100);
          }

当 div 元素移入 book-billing-address div 时，应用了以下 CSS。

#book-billing-address .pac-container{
  position: absolute !important;
  left: 0px !important;
  top: 36px !important;
}

【讨论】：

【解决方案3】：

是的，您可以设置自动完成的样式 https://google-developers.appspot.com/maps/documentation/javascript/places-autocomplete#style_autocomplete

但是，让我们看看为什么会出现“差距”。

仔细检查您的 HTML 和 BODY 标签，看看它们是否添加了边距/填充

因此，自动完成功能检测其位置的方式是从 BODY 标记的顶部/左侧计算 X/Y。我遇到了同样的问题（自动完成在结果框和字段之间有很大的差距），我发现我的 CMS 系统正在为管理栏的 BODY 标签添加 30px 的边距，这将自动完成框向下推30 个像素...（真正的问题）

html, body{margin:0 0 0 0;}

并且自动完成垂直位置是正确的，并且没有任何奇怪的 JS 脚本，间隙就消失了......

【讨论】：

在我的情况下，有边距的身体的第一个孩子导致了差距。将其更改为填充解决了问题（折叠的边距有时令人惊讶:)

【解决方案4】：

请检查搜索框的父元素，如果父元素有margin-top，则将其转换为padding-top

示例代码 `

.parent_element {
   /* margin-top: 70px; */
    padding-top: 70px;
}
</style>
<div class="parent_element">
    <input type="text" class="autocomplete">
</div>`

希望对你有用:)

【讨论】：

【解决方案5】：

这对我来说非常有用，滚动时位置错误没有问题

function initAutocomplete() {
      //....codes...
       //....add this code just before close function...
    setTimeout(function(){ 
                $(".pac-container").prependTo("#mapMoveHere");
            }, 300);

}

https://codepen.io/gmkhussain/pen/qPpryg

【讨论】：

【解决方案6】：

在body标签上添加css，位置为：relative

成功了。

【讨论】：