谷歌地图自动完成,修复输入

Question

我正在尝试将google地图自动填充输入添加到我的离子应用中.除非滚动,否则它的效果非常好.如图所示:

滚动时的位置错误

所以我尝试了不同的东西,比如改变.pac-container的位置,但它没有解决问题.当我检查页面时,似乎结果容器在页面末尾加载,因此不容易使块粘在输入栏上.

我已经到处搜索过,并没有找到任何合适的解决方案？有人知道怎么做吗？(它实际上只是一个简单的代码:

    function initialize() {
            var options = {componentRestrictions: {country: 'uk'}, types: ['geocode']}
        new google.maps.places.Autocomplete(
        (document.getElementById('autocomplete')), options);
    }

    initialize();

的jsfiddle

谢谢

Answer 1

我也有同样的问题。我的解决方案是：

$('#inputContainer').scroll(function(){
    //Set new top to autocomplete dropdown
    newTop = $('#autocompleteInput').offset().top + $('#autocompleteInput').outerHeight();
    $('.pac-container').css('top', newTop + 'px');
  }
});

这会在容器滚动时更新下拉位置。

Answer 2

当我在可滚动模式内的表单上实现自动完成时，我刚刚遇到了同样的问题。如果您只有一个自动完成对象，那么解决方案相对简单。

1. 首先确保元素的父元素具有相对位置。

2. 然后您需要选择 .pac-container 并将其附加到父级。

   $("#autocomplete").parent()
       .css({position: "relative"})
       .append(".pac-container");
   

3. 最后将 .pac-container 的左侧和顶部位置设置为元素下方。这需要在带有!important声明的样式表中完成，以确保它覆盖Google 代码设置的内联样式。

   // these values will need to be calculated based on your layout
   .pac-container {
       top: 40px !important;
       left: 0px !important;
   }
   

如果单个页面上有多个自动完成对象，这显然不起作用。幸运的是，我找到了一种处理这种情况的方法，并且最近将其发布在一个jQuery 插件中，该插件旨在使自动完成地址表单变得轻而易举。