谷歌地图自动完成，修复输入 [英] Google maps autocomplete, fix to the input

问题描述

我正在尝试向我的 ionic 应用程序添加谷歌地图自动完成输入.它工作得很好，除非我滚动.如图所示:

I'm trying to add a google maps autocomplete input to my ionic app. It works pretty well except when I scroll. As shown on the image:

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

So I tried different things like changing the position of .pac-container but it doesn't solve the problem. When I inspect the page, it seems that the results container loads at the end of the page, so it's not easy to make the block stick to the input bar.

我已经到处搜索，但没有找到任何合适的解决方案?有人知道怎么做吗?(其实就是这么简单的代码:

I already searched everywhere and didn't fidn any suitable solution ? Does someone have an idea how to do it ? (It's actually just a simple code like this:

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

jsfiddle

谢谢

推荐答案

我有同样的问题.我的解决方案是:

I have the same problem. My solution was:

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

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

This update the dropdown position when container scrolls.

这篇关于谷歌地图自动完成，修复输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！