Google Maps Places 搜索框：如何重新计算 pac-container 的位置答案

【问题标题】：Google Maps Places search box: how to recalculate position of pac-containerGoogle Maps Places 搜索框：如何重新计算 pac-container 的位置
【发布时间】：2015-10-16 14:54:22
【问题描述】：

我使用 Google Maps Javascript API v3 的 Places 搜索框：

var searchField = $(".search-box").get(0);
var searchBox = new google.maps.places.SearchBox(searchField);

我在移动网络应用程序中使用它。当设备方向改变时，页面字体大小会被重新计算（作为我们应用逻辑的一部分），因此搜索框的大小和位置也会改变。

但自动完成框 (.pac-container) 的宽度和位置会在更改其他页面元素的大小之前重新计算，我无法控制负责重新计算的方法。

有没有办法访问负责 .pac-container 内联 CSS 的方法？它没有在 API 文档中列出，我在缩小的 maps api 源中找不到它。

【问题讨论】：

我会在地图上触发resize 事件。这应该告诉地图重新计算定位。
谢谢你，Chad，你帮助了我。

标签： javascript google-maps google-maps-api-3

【解决方案1】：

延迟触发窗口调整大小事件（让我们的应用更改页面大小）起到了作用：

setTimeout(function() {
  google.maps.event.trigger(window, 'resize');
}, 500);

然后我发现问题是由父容器上设置的 css transition: all 属性引起的。删除过渡解决了这个问题。

【讨论】：

您应该触发地图调整大小goog.events.trigger(map, 'resize')。它也是由窗口调整大小触发的，所以这就是它起作用的原因。另外，我不建议使用超时，而是在您的应用更改大小时将其与特定事件联系起来。
问题是我在这个页面上没有地图，只有搜索框，所以没有地图对象。我试过google.maps.event.trigger(searchBox, 'resize') 但没有运气。无论如何，我发现问题是由父容器上设置的 css 'transition: all' 属性引起的。移除过渡解决了这个问题。
啊，我错过了地点搜索参考。这可能是你能做到的最好的了。