Google 地方信息自动填充功能未显示
Posted
技术标签:
【中文标题】Google 地方信息自动填充功能未显示【英文标题】：Google Places Autocomplete not showing up 【发布时间】：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，它保存了结果与
这样做的问题是，一旦从自动完成中选择了一个项目，自动完成仍然可见，我很确定有更好的方法来使用自动完成。
【问题讨论】：
【参考方案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 处于正确位置，并且具有高度，但不可见。
bodymin-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，并且已在帐户上启用了计费
【讨论】：
以上是关于Google 地方信息自动填充功能未显示的主要内容，如果未能解决你的问题，请参考以下文章
Google地方自动填充功能会显示“ Cannoat加载结果！”
使用Javascript和Places会话令牌的Google地方自动填充示例