首页 文章

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

提问于
浏览 次
27

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

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

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

angularjs google-maps-api-3 angularjs-directive google-places-api

3 回答

  • 0

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

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

    回复于
  • 11

    检查索引文件中的映射版本

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.26&key=YOUR API KEY"></script>

    Specify v=3.26 when loading the Google Map API

    回复于
  • 40

    还有另一种情况， .pac-container 不会显示：当你使用固定定位的容器并且你没有实际的相对/静态子容器 <body> 时 <body> 折叠到 0 高度或者太小以至于底边高于 .pac-container 出现的位置 . 在这种情况下，您可以使用devtools查看pac-container处于正确位置，并且具有高度，但不可见 .

    body{min-height:calc(100vh)} 可以提供帮助 .

    回复于

相关问题