未显示Google地方信息自动填充功能 [英] Google Places Autocomplete not showing up

问题描述

我已经研究了好几个小时，试图弄清为什么没有显示出所谓的简单自动完成功能.

I've been working on this for hours trying to figure out why the supposedly simple autocomplete wasn't showing up.

事实证明，在我的代码中，输入元素设置为autocompete="off"，而pac容器上的样式为display: none.

It turns out that in my code, the input element is being set to autocompete="off", and the style on the pac-container is display: none.

我可以在DevTools中更改这些值，并且效果很好，但是我不知道如何或为什么将这些值设置为这些值.

I can change these values in DevTools, and it works fine, but I can't figure out how or why these are being set to these values.

我的自动完成功能是在这样的Angular Directive中设置的，其中loadGmaps获取google api.

My autocomplete is set-up in an Angular Directive, like this, where loadGmaps gets the 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();
    });
});

---------------------更新------------------------- ---------------------

---------------------Update----------------------------------------------

希望没有人因此而误入歧途，autocomplete="off"有点误导.即使使用autocomplete="off"，自动完成功能仍然有效，因此这不是问题.我正在覆盖.pac-container元素的css，该元素将结果保存在

Hopefully nobody else is lead astray by this, the autocomplete="off" is a bit misleading. Even with autocomplete="off", the autocomplete still works, so that wasn't the problem. I am over-writing the css of the .pac-container element, which holds the results with

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

问题是，一旦从自动完成中选择了一个项目，自动完成就保持可见，我敢肯定，有一种更好的方式来使用自动完成.

The problem with this is that once an item has been selected from the autocomplete, the autocomplete remains visible, I'm pretty sure there is a better way to be using autocomplete.

推荐答案

对于其他可能陷入困境或对此有困难的人，请忽略'autocomplete ="no"'值，不要使用'display:block "以显示".pac-container".

For anybody else who may be stuck or having difficulty with this, ignore the 'autocomplete="no"' value, and don't use 'display: block' to show the '.pac-container'.

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

go into your chrome devtools and make sure you can see the .pac-container div. set the z-index of that div in your css. When there is a searched value, google will change the display to block and handle the showing and hiding, you just have to worry about the z-index.

这篇关于未显示Google地方信息自动填充功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！