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地址下拉菜单的位置。