Google 地方信息自动完成未显示 [英] Google Places Autocomplete not showing up

问题描述

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

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

我可以在 DevTools 中更改这些值，并且工作正常，但我不知道如何或为什么将这些值设置为这些值.

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

<前>模板:'<input id="google_places_ac" name="google_places_ac" type="text" class="input-block-level"/>',链接:函数($scope，elm，attrs){loadGmaps().then(function(){var autocomplete = new google.maps.places.Autocomplete($("#google_places_ac")[0], {});控制台日志(自动完成)；google.maps.event.addListener(autocomplete, 'place_changed', function() {var place = autocomplete.getPlace();$scope.position = {纬度:place.geometry.location.lat(),lon:place.geometry.location.lng()};$scope.$apply();});});

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

希望没有其他人因此而误入歧途，autocomplete="off" 有点误导.即使使用 autocomplete="off"，自动完成仍然有效，所以这不是问题.我正在重写 .pac-container 元素的 css，它用

保存结果<前>.pac-container {//这是谷歌自动完成不显示的修复z-index:10000 ！重要；显示:阻止！重要；}

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

解决方案

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

进入您的 chrome devtools 并确保您可以看到 .pac-container div.在你的 css 中设置那个 div 的 z-index.当有搜索到的值时，谷歌会改变显示来屏蔽和处理显示和隐藏，你只需要担心z-index.

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

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.

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.

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----------------------------------------------

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.

解决方案

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'.

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屋！