angularjs – Google商家信息自动填充未显示

我一直在努力这个几个小时,想知道为什么这个简单的自动完成没有出现。

事实证明,在我的代码中,input元素被设置为autocompete =“off”,而pac-container上的样式显示为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”有点误导。即使自动完成=“关闭”,自动完成功能仍然有效,因此不是问题。我覆盖了.pac-container元素的css,它保存了结果

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

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

对于任何可能被卡住或有困难的人,忽略’autocomplete =“no”’值,不要使用’display:block’显示’.pac-container’。

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

相关文章

AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...