将谷歌放置 pac-container 放在 div 中？答案

【问题标题】：Put google places pac-container inside div?将谷歌放置 pac-container 放在 div 中？
【发布时间】：2014-02-10 23:01:36
【问题描述】：

我正在使用 google places 自动完成 api，当我初始化自动完成元素 autocomplete = new google.maps.places.Autocomplete($('#google_places_ac')[0], {}) 时，它会将 .pac-container 附加到正文中。

我有一个可滚动的 div，该内容位于其中，所以.pac-container 被定位为绝对位置，当 div 滚动时它不会随之滚动。

有什么方法可以让.pac-container 插入到我的 div 中而不是在正文的末尾？

【问题讨论】：

标签： javascript google-places-api

【解决方案1】：

这不是一个完美的解决方案，但它是我能找到的最好的解决方案

var addressInputElement = $('#yourInputElementId');
addressInputElement.on('focus', function () {
  var pacContainer = $('.pac-container');
  $(addressInputElement.parent()).append(pacContainer);
})

您可能还需要更改一些 css

.pac-container {  
  z-index: 9999999 !important;  
  top: 32px !important;   //your input height
  left: 0 !important; 
}

【讨论】：

【解决方案2】：

解决方法是在滚动时模糊输入字段。

$('insert-scrolling-container').on('scroll', function() {
    $('#google_places_ac').blur();
});

【讨论】：

【解决方案3】：

您可以将 google places pac-container 放在 div 中检查此解决方案

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

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

【讨论】：

【解决方案4】：

刚刚在尝试找到解决同一问题的方法时遇到了这个问题。

我最终使用了 MooTools JavaScript 框架。

希望这对遇到同样问题的人有所帮助。

    // Start Address is the address form input field
    // Add a focus to delay this being run
    $('StartAddress').addEvent('focus', function()
    {
         // Make sure the new location of the .pac-container doesn't already contain it
         if($$('.route-form fieldset .pac-container').length == 0)
         {
              // Use adopt() to move the .pac-container to its new location
              // This method will keep all relations between the element and Google Maps
              $$('.route-form fieldset')[0].adopt($$('.pac-container'));
         }
    });

【讨论】：

【解决方案5】：

这不是一个完美的解决方案，但它是我能找到的最好的解决方案

var addressInputElement = $('#yourInputElementId');
addressInputElement.on('focus', function () {
  var pacContainer = $('.pac-container');
  $(addressInputElement.parent()).append(pacContainer);
})

您可能还需要更改一些 css

.pac-container {  
  z-index: 9999999 !important;  
  top: 32px !important;   //your input height
  left: 0 !important; 
}

从第一次得到这个评论我不能检查有用但我会重复它

【讨论】：