Google 地图自动完成,修复输入

问题描述 投票:0回答:7

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

所以我尝试了不同的方法,例如更改 .pac-container 的位置,但这并不能解决问题。 当我检查页面时,结果容器似乎在页面末尾加载,因此要使块粘在输入栏上并不容易。

我已经到处寻找但没有找到合适的解决方案?有人知道该怎么做吗? (实际上只是一个简单的代码,如下所示:

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

jsfiddle

谢谢

css angularjs google-maps ionic-framework autocomplete
7个回答
9
投票

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

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

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


6
投票

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

  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 插件中,旨在使自动完成地址表单变得轻而易举。


2
投票

我得到了解决方案检查示例滚动时没有位置错误问题

function initAutocomplete() {
      //....codes...
       //....add this code just before close function...
    setTimeout(function(){ 
                $(".pac-container").prependTo("#mapMoveHere");
            }, 300);
}

https://codepen.io/gmkhussain/pen/qPpryg


2
投票

就我而言,我必须将 css 设置为

html,body{overflow-x:visible;}
才能使 pac-container 固定到输入字段。


0
投票

我现在能够重现该问题,解决方案只需将

position: relative
添加到您的包装器
box
并将
position: absolute
添加到您的
#autocomplete
输入中。

我检查了 Google 团队提供的示例的解决方案。

我已经更新了你的小提琴以匹配解决方案,但它是这样的:

您更新的 CSS:

.box {
  position: relative;
  height: 200vh;
}

#autocomplete {
    width:350px;
    position: absolute;
}

0
投票

由于我的输入字段位于“ion-content”内,因此我实现了 Nicolas Pennesi 用离子含量法回答:

onScroll($event) {
// his code here
}

0
投票

我在 Angular 应用程序中嵌套了很多组件,并尝试了很多解决方案,但没有任何效果。对我有用的是主要的 styles.sccs 我添加了这个:

body {
  position: relative;
}

或者您可以在 index.html 中添加内联 CSS:

© www.soinside.com 2019 - 2024. All rights reserved.