Angularjs Google Places Autocomplete未显示

我花了好几个小时来研究这个问题，试图弄明白为什么所谓简单的自动完成功能没有出现

事实证明，在我的代码中，输入元素被设置为

autocompete=“off”

，pac容器上的样式是

display:none

我可以在DevTools中更改这些值，它工作得很好，但我不知道如何或为什么将这些值设置为这些值

我的autocomplete是在一个Angular指令中设置的，就像这样，loadGmaps从中获取GoogleAPI

template: '<input id="google_places_ac" name="google_places_ac" type="text" class="input-block-level"/>', link: function($scope, elm, attrs){ loadGmaps().then(function(){ var autocomplete = new google.maps.places.Autocomplete($("#google_places_ac")[0], {}); console.log(autocomplete); google.maps.event.addListener(autocomplete, 'place_changed', function() { var place = autocomplete.getPlace(); $scope.position = { lat: place.geometry.location.lat(), lon: place.geometry.location.lng() }; $scope.$apply(); }); });

---

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

对于其他可能被卡住或有困难的人，忽略“autocomplete=”no“”值，并且不要使用“display:block”来显示“.pac容器”

---

进入chrome开发工具，确保您可以看到

.pac容器

div。在css中设置该div的z索引。当有搜索值时，google会将显示更改为阻止并处理显示和隐藏，你只需要担心z-指数。

还有一种情况，

.pac容器

不会出现：当你使用固定位置的容器，离开

而没有实际的相对/静态孩子时，

会塌陷到

0

高度，或者塌陷到很小的程度，以至于底部边缘高于

.pac容器

将出现。在这种情况下，您可以使用devtools看到pac容器处于正确的位置，并且具有高度，但不可见

---

body{min height:calc（100vh）}

可能会有所帮助。

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

<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

谢谢，

.pac容器{z-index:10000！重要；}

对我有用！我遇到了同样的问题，但是z-index只是解决方案的一部分。我仍然无法得到显示：阻止自动开火。它卡在显示屏上：无。有什么建议吗？这取决于当前窗口的z-索引，在我的例子中-剑道模态窗口，我必须将z-索引设置为100000以实现自动完成，显然kendo window modal的z-index高于10000注：在开发工具中设置z-index以快速测试对我来说不起作用，但实际上在CSS中的.pac容器类上设置z-index确实解决了我的问题。我已经为此问题工作了数小时。我正在使用带有ng贴图的angular ui模式，我希望在输入上放置自动完成搜索框。位置建议没有显示，然后在chrome的开发工具上，我看到它在那里，但没有渲染。所以我刚刚添加了带有z索引的.pac容器，它可以正常工作。这就是确切的解决方案！！！非常感谢：）为什么要用

calc（）

来获取一个静态值？我的代码已经运行了一年多了。刚才突然将

style=“display:none”

添加到应用该指令的输入元素中。事实证明，指定googleapis的版本解决了这个问题。我想这意味着指令和最新的GMAPAPI版本之间存在冲突。你能帮我吗？@nehasoni只要像上面的例子那样加载googleapis就可以了，我的晚上就没事了！这绝对应该是公认的答案：它修复了问题，而没有招致任何CSS攻击。刚刚为我的公司节省了数小时的开发时间。

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