Question

我一直在研究这个问题几个小时试图弄清楚为什么这个简单的自动完成没有出现。

事实证明，在我的代码中，input元素被设置为autocompete="off"，而pac-container上的样式为display: none。

我可以在DevTools中更改这些值，并且它工作正常，但我无法弄清楚这些值是如何或为何设置为这些值。

我的自动填充是在Angular Directive中设置的，就像这样，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;
            }

问题在于，一旦从自动填充中选择了某个项目，自动填充功能仍然可见，我很确定有更好的方法可以使用自动填充功能。

Answer 1

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

进入你的chrome devtools并确保你可以看到.pac-container div。在你的CSS中设置该div的z-index。当存在搜索值时，谷歌会将显示更改为阻止并处理显示和隐藏，您只需担心z-index。

Answer 2

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

<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

Answer 3

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

.pac-container可以提供帮助。

Google商家信息自动填充功能未显示

3 个答案: