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

Question

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

事实证明,在我的代码中,输入元素被设置为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-containerdiv.在你的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