Google 地方信息自动填充功能未显示答案

【问题标题】：Google Places Autocomplete not showing upGoogle 地方信息自动填充功能未显示
【发布时间】：2013-12-09 17:43:18
【问题描述】：

我已经为此工作了好几个小时，试图弄清楚为什么所谓的简单自动完成功能没有出现。

原来在我的代码中，输入元素被设置为autocompete="off"，而pac-container上的样式是display: none。

我可以在 DevTools 中更改这些值，并且效果很好，但我不知道如何或为什么将这些值设置为这些值。

我的自动完成功能是在 Angular 指令中设置的，就像这样，loadGmaps 获取 google api。

模板：'', 链接：函数（$范围，榆树，attrs）{ loadGmaps().then(function(){ var autocomplete = new google.maps.places.Autocomplete($("#google_places_ac")[0], {}); console.log（自动完成）； google.maps.event.addListener（自动完成，'place_changed'，函数（）{ var place = autocomplete.getPlace(); $scope.position = { 纬度：place.geometry.location.lat(), lon：place.geometry.location.lng() }; $scope.$apply(); }); });

----------更新-------------- ---------------------

希望没有其他人因此而误入歧途，autocomplete="off" 有点误导。即使使用autocomplete="off"，自动完成功能仍然有效，所以这不是问题。我正在重写 .pac-container 元素的 css，它保存了结果与

.pac-container { //这是 google 自动完成不显示的修复 z-index: 10000 ！重要；显示：块！重要； }

这样做的问题是，一旦从自动完成中选择了一个项目，自动完成仍然可见，我很确定有更好的方法来使用自动完成。

【问题讨论】：

标签： angularjs google-maps-api-3 angularjs-directive google-places-api

【解决方案1】：

对于其他可能遇到困难或遇到困难的人，请忽略 'autocomplete="no"' 值，并且不要使用 'display: block' 来显示 '.pac-container'。

进入您的 chrome devtools 并确保您可以看到 .pac-container div。在您的 CSS 中设置该 div 的 z-index。当有搜索到的值时，google会改变显示来屏蔽处理显示和隐藏，你只需要担心z-index。

【讨论】：

谢谢，.pac-container { z-index: 10000 !important; } 为我工作！
我遇到了同样的问题，但是 z-index 只是解决方案的一部分。我仍然无法显示：阻止自动触发。它卡在显示：无。有什么建议吗？
这真的取决于当前窗口的z-index，在我的情况下-剑道模态窗口，我必须将z-index设置为100000才能带来自动完成，显然剑道窗口模态具有更高的z-指数大于 10000
注意： 在开发工具中设置 z-index 以快速测试对我来说不起作用，但实际上在我的 CSS 中的 .pac-container 类上设置它确实解决了问题就我而言。
我在这个问题上工作了好几个小时。我正在使用带有 ng-maps 的 angular-ui 模态，并且我想要在输入上放置自动完成搜索框。这些地方的建议没有显示，然后在 chrome 的开发工具上我看到它在那里但没有渲染。所以我只是添加了带有 z 索引的 .pac-container 并且它可以工作。这是确切的解决方案！非常感谢:)

【解决方案2】：

还有另一种情况，.pac-container 不会出现：当你使用固定定位的容器并且你离开 <body> 没有实际的相对/静态子级时，<body> 折叠到 0 高度或太小以至于底部边缘高于.pac-container 将出现的位置。在这种情况下，您可以使用 devtools 看到 pac-container 处于正确位置，并且具有高度，但不可见。

body{min-height:calc(100vh)} 可以提供帮助。

【讨论】：

为什么calc() 是静态值？

【解决方案3】：

检查索引文件中地图的版本

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.26&key=YOUR API KEY"></script>

加载 Google Map API 时指定 v=3.26

【讨论】：

我的代码运行了一年多。刚才，style="display:none" 突然被添加到应用指令的输入元素中。原来，指定 googleapis 的版本修复了它。我想这意味着指令和最新的 gmap api 版本之间存在冲突。
嘿@ChrisAelbrecht，遇到同样的问题。你能帮我解决这个问题吗？
@nehasoni 只需按照上面的示例加载 googleapis
拯救了我的夜晚！
这绝对是公认的答案：它解决了问题而不会招致任何 CSS 黑客攻击。刚刚为我的公司节省了数小时的开发时间来解决问题。

【解决方案4】：

确保您已在 google map 上启用了 Direction API，并且已在帐户上启用了计费

【讨论】：