angularjs - Google 地方信息自动完成功能未显示

Question

我已经为此工作了几个小时，试图找出为什么所谓的简单自动完成功能没有出现。

事实证明，在我的代码中，输入元素被设置为 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;
}

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

Answer 1

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

进入 chrome 开发工具并确保您可以看到 .pac-container div。在 css 中设置该 div 的 z-index。当有搜索到的值时，google会将显示更改为阻止并处理显示和隐藏，您只需要担心z-index即可。