자바 스크립트 - Google지도 - 자동 완성

Question

나는 함께 모으는 양식을 가지고 있으며 자동 입력란에 입력하려고합니다. 나는 95 %의 성공을 거두었지만 Lat/Long 코드를 자동으로 적절한 양식 필드에 채우는 데 어려움을 겪고 있습니다.

여기

  <div class="control-group"> 
      <label class="control-label">Address *</label> 
       <div class="controls"> 
        <input value="" placeholder="Enter the customers full address" class="form-control" id="autocomplete" type="text"> 
       </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label">House Number</label> 
       <div class="controls"> 
        <input value="" class="form-control" id="street_number" disabled="true"> 
       </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label">Street Address</label> 
       <div class="controls">     
        <input value="" class="form-control" id="route" disabled="true"> 
       </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label">City</label> 
       <div class="controls"> 
        <input value="" class="form-control" id="locality" disabled="true"> 
       </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label">State</label> 
       <div class="controls"> 
        <input value="" class="form-control" id="administrative_area_level_1" disabled="true"> 
       </div> 
     </div>  
     <div class="control-group"> 
      <label class="control-label">Zipcode</label> 
       <div class="controls"> 
        <input value="" class="form-control" id="postal_code" disabled="true"> 
       </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label">Country</label> 
       <div class="controls"> 
        <input value="" class="form-control" id="country" disabled="true"> 
       </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label">Lat</label> 
       <div class="controls"> 
        <input value="" class="form-control" id="LatLngBounds" disabled="true"> 
       </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label">Long</label> 
       <div class="controls"> 
        <input value="" class="form-control" id="LatLngBounds" disabled="true"> 
       </div> 
     </div> 

그리고 여기 내 자바 스크립트 내 HTML입니다.

var placeSearch, autocomplete; 
// Need to add Lat/Long to populate field. 
    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', 

    }; 

function initAutocomplete() { 
    autocomplete = new google.maps.places.Autocomplete((document.getElementById('autocomplete')),{ types: ['geocode']}); 
    autocomplete.addListener('place_changed', fillInAddress); 
} 

    function fillInAddress() { 
     var place = autocomplete.getPlace(); 
      for (var component in componentForm) { 
       document.getElementById(component).value = ""; 
       document.getElementById(component).disabled = true; 
      } 
      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]]; 
         document.getElementById(addressType).value = val; 
        } 
      } 
    } 

Answer 1

1. 당신의 HTML이 잘못되었습니다. id = "LatLngBounds"의 두 요소가 있습니다.
2. 위도 및 경도 값을 양식에 채울 코드가 없습니다.

사람들이 나를 위해 일하게 고정 :

코드 :

var placeSearch, autocomplete; 
 
    // Need to add Lat/Long to populate field. 
 
    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', 
 

 
    }; 
 

 
    function initAutocomplete() { 
 
     autocomplete = new google.maps.places.Autocomplete((document.getElementById('autocomplete')), { 
 
     types: ['geocode'] 
 
     }); 
 
     autocomplete.addListener('place_changed', fillInAddress); 
 
    } 
 

 
    function fillInAddress() { 
 
     var place = autocomplete.getPlace(); 
 
     for (var component in componentForm) { 
 
     document.getElementById(component).value = ""; 
 
     document.getElementById(component).disabled = true; 
 
     } 
 
     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]]; 
 
      document.getElementById(addressType).value = val; 
 
     } 
 
     } 
 
     document.getElementById("Latitude").value = place.geometry.location.lat(); 
 
     document.getElementById("Longitude").value = place.geometry.location.lng(); 
 
    } 
 
    google.maps.event.addDomListener(window, "load", initAutocomplete);

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> 
 
<div class="control-group"> 
 
    <label class="control-label">Address *</label> 
 
    <div class="controls"> 
 
    <input value="Beacon St, Boston, MA" placeholder="Enter the customers full address" class="form-control" id="autocomplete" type="text"> 
 
    </div> 
 
</div> 
 
<div class="control-group"> 
 
    <label class="control-label">House Number</label> 
 
    <div class="controls"> 
 
    <input value="" class="form-control" id="street_number" disabled="true"> 
 
    </div> 
 
</div> 
 
<div class="control-group"> 
 
    <label class="control-label">Street Address</label> 
 
    <div class="controls"> 
 
    <input value="" class="form-control" id="route" disabled="true"> 
 
    </div> 
 
</div> 
 
<div class="control-group"> 
 
    <label class="control-label">City</label> 
 
    <div class="controls"> 
 
    <input value="" class="form-control" id="locality" disabled="true"> 
 
    </div> 
 
</div> 
 
<div class="control-group"> 
 
    <label class="control-label">State</label> 
 
    <div class="controls"> 
 
    <input value="" class="form-control" id="administrative_area_level_1" disabled="true"> 
 
    </div> 
 
</div> 
 
<div class="control-group"> 
 
    <label class="control-label">Zipcode</label> 
 
    <div class="controls"> 
 
    <input value="" class="form-control" id="postal_code" disabled="true"> 
 
    </div> 
 
</div> 
 
<div class="control-group"> 
 
    <label class="control-label">Country</label> 
 
    <div class="controls"> 
 
    <input value="" class="form-control" id="country" disabled="true"> 
 
    </div> 
 
</div> 
 
<div class="control-group"> 
 
    <label class="control-label">Lat</label> 
 
    <div class="controls"> 
 
    <input value="" class="form-control" id="Latitude" disabled="true"> 
 
    </div> 
 
</div> 
 
<div class="control-group"> 
 
    <label class="control-label">Long</label> 
 
    <div class="controls"> 
 
    <input value="" class="form-control" id="Longitude" disabled="true"> 
 
    </div> 
 
</div>