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

问题描述

我正在尝试将谷歌地图自动完成输入添加到我的离子应用程序中。除了当我滚动时，它工作得很好。如图所示：

定位错误当滚动

因此，我尝试了改变 .pac-container 的位置，但它不能解决问题。
当我检查页面时，看起来结果容器加载在页面末尾，所以将块粘在输入栏上并不容易。

我已经到处搜索，并没有找到任何合适的解决方案？有人有一个想法如何做到这一点？
（它实际上就是这样一个简单的代码：

pre $函数初始化（）{
var options = {componentRestrictions：{country：'uk'}，types：['geocode']}
google.maps.places.Autocomplete（
（document.getElementById（'autocomplete'）），options）;


initialize（）;

jsfiddle

在此先感谢您，
Robin Fourcade 。

解决方案

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

<$ $（$＃$ input）; $（'＃inputContainer'）。scroll（function（）{
//设置新的顶部到自动完成下拉菜单
newTop = $（'＃autocompleteInput'）。 offset（）。top + $（'＃autocompleteInput'）。outerHeight（）;
$（'。pac-container'）.css（'top'，newTop +'px'）;
}
}）;

此更新下拉位置n当容器滚动时。

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:

Position bug when scroll

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

Thanks in advance, Robin Fourcade.

解决方案

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