Google地址自动填充显示在页面上错误的位置

Question

我正在使用Google地址自动填充API，当我开始输入地址时，如果要直接显示在输入框下方，则会在页面上方显示地址框。 它的位置也受到你在页面上向下滚动的程度的影响; 向下滚动越远，框出现的越高。 这消除了对盒子位置进行硬编码的可能性，因为它随着滚动动态变化。

有任何想法吗？

<input type="text" class="moving-input form-control" id="address" autocomplete="true" placeholder="">

    <script>
    // This example displays an address form, using the autocomplete feature
    // of the Google Places API to help users fill in the information.
    // This example requires the Places library. Include the libraries=places
    // parameter when you first load the API. For example:
    // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
    var placeSearch, autocomplete;
    var componentForm = {
      street_number: 'short_name',
      route: 'long_name',
      locality: 'long_name',
      administrative_area_level_1: 'short_name',
      //country: 'long_name',
      postal_code: 'short_name'
    };

    var typeToFieldMap = {
        administrative_area_level_1:"billing_state",
        locality:"billing_city",
        postal_code:"billing_zip",
        street_number: 'billing_street',
        route: 'billing_route'
    }

    function initAutocomplete() {
      // Create the autocomplete object, restricting the search to geographical
      // location types.
      autocomplete = new google.maps.places.Autocomplete(
          /** @type {!HTMLInputElement} */(document.getElementById('address')),
          {types: ['address']});
      // When the user selects an address from the dropdown, populate the address
      // fields in the form.
      autocomplete.addListener('place_changed', fillInAddress);
    }
    function fillInAddress() {
        // Get the place details from the autocomplete object.
        var place = autocomplete.getPlace();

        // Get each component of the address from the place details
        // and fill the corresponding field on the form.
        for (var i = 0; i < place.address_components.length; i++) {
          var addressType = place.address_components[i].types[0];
          if (componentForm[addressType]) {
            var val = place.address_components[i][componentForm[addressType]];
            var el = document.getElementById(typeToFieldMap[addressType]);
            if (addressType == "route")
                el.value = el.value + " " + val;
            //else if (addressType == "administrative_area_level_1")
            //  selectItemByValue(el, val);
            else
                el.value = val;
            console.log(val);
          }
        }

        $('.moving-input').each(
        function(){
            var input_wrap = $(this).closest('.moving-input');
            var val = $(this).val().trim();
            if (val.length){
               input_wrap.addClass('filled'); 
            }
        });     
    }

    function selectItemByValue(elmnt, value){
        for(var i=0; i < elmnt.options.length; i++)
        {
            //var sname = getStateName(value);
          if(elmnt.options[i].value == value)
            elmnt.selectedIndex = i;
        }

     }
    // Bias the autocomplete object to the user's geographical location,
    // as supplied by the browser's 'navigator.geolocation' object.
    function geolocate() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
          var geolocation = {
            lat: position.coords.latitude,
            lng: position.coords.longitude
          };
          var circle = new google.maps.Circle({
            center: geolocation,
            radius: position.coords.accuracy
          });
          autocomplete.setBounds(circle.getBounds());
        });
      }
    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC-3Akj68Di27JBiFK2xkV6YLFdUMIWDGE&libraries=places&callback=initAutocomplete" async defer></script>

Answer 1

html设置为100％。 删除此更正了Google地址下拉列表。