javascript - 更改 Google Places 自动完成结果框的位置

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

在我正在处理的页面上,Google Places Autocomplete 的结果显示在它应该显示的位置下方 70 像素处,在搜索框和结果容器的开头之间留下了一个空隙。

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

我可以通过覆盖 .pac-container 类的 top 属性的值来解决这个问题(替换 1234px,API 已使用 1164px 计算),但我宁愿有一种动态或仅基于偏移量来执行此操作的方法,而不是必须对该数字进行硬编码。

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

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

最佳答案

我尝试了很多方法,到目前为止对我有用的最好的方法是良好的旧(负)边距。

我希望生成的菜单显示在顶部,我这样做了:

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

关于javascript - 更改 Google Places 自动完成结果框的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31146647/

相关文章:

javascript - 使用 jquery 动态标记添加 DOM 元素

javascript - JavaScript 中的简单 Observable 2 路数据绑定(bind)

javascript - 如何使用 jQuery 从 HTML 获取元素

css - 动画关键帧没有褪色?

javascript - 单击按钮时隐藏/显示隐藏的 div

Javascript onKeyUp

javascript - 根据不同的文化设置获取格式化日期

css - 如何正确实现固定侧边栏?

javascript - 这个 JavaScript 程序 document.write() 不起作用?

javascript - 如何在剑道网格中显示[object Object]的实际数据