如何使用谷歌地圖V3自動完成表單

Question

當我使用谷歌地圖API第3版，就能自動地址形式，但我不想在這個例子中（https://google-developers.appspot.com/maps/documentation/javascript/examples/full/places-autocomplete-addressform）使用通用搜索領域一樣清除搜索輸入字段與JavaScript。

我想使街道地址字段的搜索字段以及街道號碼和街道名稱字段只有。我發現了JS提琴（https://jsfiddle.net/smartystreets/0c9fy73v/）這個例子中我不能複製它。

我試圖轉動自動填充=關，但是，鉻不工作（對於elementId（「自動完成」））

我試圖隱藏途徑和街道輸入元件和設定值輸入的ID爲空。

document.getElementById('autocomplete').value = ''; 

然後使用隱藏的輸入字段來重建該表單輸入瓦特/

document.getElementById('autocomplete').value = document.getElementById('street_number') + ' ' + document.getElementById('route'); 

任何想法我做錯了嗎？爲什麼不清楚搜索字段？

這是我爲我的搜索/地址欄HTML：

<!-- address --> 
    <div class="col-md-6 col-lg-6"> 
     <label class="light text-capitalize">address:</label> 
     <input type="text" id="autocomplete" 
     name="street" placeholder="Street address, PO Box, etc."> 
     <input type="hidden" id="route" disabled="false"> 
     <input type="hidden" id="street_number" disabled="false"> 
     <input type="text" name="address1" placeholder="(Optional) Apartment, Suite, Floor, etc."> 
    </div> 
<!-- address end --> 

這是我的內聯JS

var placeSearch, autocomplete; 
    var componentForm = { 
    street_number: 'short_name', 
    route: 'long_name', 
    locality: 'long_name', 
    administrative_area_level_1: 'short_name', 
    postal_code: 'short_name' 
    }; 

    function initAutocomplete() { 
    // Create the autocomplete object, restricting the search to geographical 
    // location types. 
    autocomplete = new google.maps.places.Autocomplete(
     /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')), 
     {types: ['geocode']}); 

    // 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(); 


    for (var component in componentForm) { 

    document.getElementById('street_number').value = ''; 
    document.getElementById('route').value = ''; 
    document.getElementById('locality').value = ''; 
    document.getElementById('administrative_area_level_1').value = ''; 
// document.getElementById('country').value = ''; 
    document.getElementById('postal_code').value = ''; 

    } 

    // 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]]; 
     document.getElementById(addressType).value = val; 
     } 
    } 
    } 

    // 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> 

Answer 1

如果你真的想後清除搜索輸入字段從自動完成地址用戶點擊，嘗試設置輸入（ID =自動完成）值清空你的地方了。

function fillInAddress() { 
    // Get the place details from the autocomplete object. 
    var place = autocomplete.getPlace(); 

    /* Your other code */ 

    document.getElementById('autocomplete').value = ''; 
} 

我剛剛爲你做了一個演示來檢查行爲。你可以在這裏看到它http://jsbin.com/mugasav/1/edit?html,js,output