logo标签列表

谷歌地点自动完成未显示出来

angularjsgoogle-maps-api-3angularjs-directivegoogle-places-api
37

我已经花了几个小时来弄清楚为什么那个简单的自动完成功能没有显示出来。

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

我可以在DevTools中更改这些值，然后它就可以正常工作，但我无法弄清楚为什么或如何将这些值设置为这些值。

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

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="off"误导。即使使用autocomplete="off"，自动完成仍然有效，所以这不是问题所在。我正在覆盖.pac-container元素的CSS，该元素保存结果，如下所示：

.pac-container {  //this is a fix for google autocomplete not showing up
    z-index: 10000 !important;
    display: block !important;
}

这个问题在于一旦从自动完成中选择了一个项目，自动完成仍然可见，我相信有更好的方法来使用自动完成。

5个回答
63

如果还有其他人遇到困难或者卡住了，可以忽略 'autocomplete="no"' 的值，不要使用 'display: block' 来显示 '.pac-container'。

打开你的谷歌开发工具（chrome devtools），确保你可以看到 .pac-container div。在你的CSS中设置该div的z-index。当有搜索值时，谷歌会将其显示出来并处理显示和隐藏，您只需要担心z-index。

14
谢谢，.pac-container { z-index: 10000 !important; } 对我很有用！ - Vince Lowe
2
我也遇到了同样的问题，然而z-index只是解决方案的一部分。我仍然无法让"display: block"自动触发。它被卡在"display: none"上了。有什么建议吗？ - letsgetsilly
2
这实际上取决于当前窗口的 z-index，对于我的情况 - kendo 模态窗口，我必须将 z-index 设置为 100000 才能带来自动完成功能，显然 kendo 窗口模态的 z-index 高于 10000。 - uowzd01
1
注意：在开发工具中设置z-index以快速测试并没有起作用，但实际上在我的CSS中设置.pac-container类的z-index解决了我的问题。 - munsellj
1
我已经花了几个小时来解决这个问题。我正在使用带有ng-maps的angular-ui modal，并且我希望在一个输入框中使用place-auto-complete搜索框。地点建议没有显示，然后在Chrome的开发工具上，我看到它存在但未渲染。所以我只是添加了.z-index的.pac-container，它就可以正常工作了。这就是确切的解决方案!!!非常感谢 :) - FraK
显示剩余4条评论
12

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

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

在加载Google地图API时，请指定v = 3.26

我的代码运行了一年多，一切都很好。突然间，在应用指令的输入元素上添加了 style="display:none"。结果发现指定googleapis的版本可以解决这个问题。我想这意味着指令与最新的gmap api版本之间存在冲突。 - Chris Aelbrecht
嘿 @ChrisAelbrecht，我遇到了同样的问题。你能帮我吗？ - neha soni
@nehasoni 就像上面的例子一样，只需加载googleapis即可。 - Chris Aelbrecht
挽救了我的晚上！ - Syed Waqas
这绝对是可接受的答案：它解决了问题，而不需要使用任何CSS hack。刚刚节省了公司数个小时开发时间用来查找问题。 - Jesse Dupuy
@ChrisAelbrecht 谢谢。对我很有用，节省了很多时间。 - neha soni
2
2
有一种情况下，.pac-container不会出现：当您使用固定定位容器并将<body>没有实际的相对/静态子元素时，<body>会坍塌到高度为0或极小值，以至于.pac-container应该出现的底部边缘比实际更高。在这种情况下，您可以使用开发工具查看.pac-container处于正确的位置，并具有高度，但是不可见。body{min-height:calc(100vh)}可以解决此问题。
2
为什么要使用 calc() 来表示静态值？ - JCKödel
0
确保您已在 Google 地图上启用了 Direction API，并且账户已启用计费。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接