谷歌自動完成跳過完整地址

所以我一直在努力使我的表單自動完成。檢查下面這個鏈接：谷歌自動完成跳過完整地址

http://test.oliveenterprisedemo.in/

它具有自動完成谷歌代碼。

這工作完全正常，除了大地址

例如：如果我輸入「的崛起，黑石，愛爾蘭」我得到它在不同的盒子來分類的正確。但是如果我輸入'6 Rise，Owenabue Heights，Carrigaline，Co. Cork，Ireland'，它會跳過我不想發生的owenabue Heights。

我想通了，它是與componentForm看起來像這樣：

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

整個的JavaScript + HTML代碼看起來是這樣的：

<!DOCTYPE html> 
    <html> 
    <head> 
    <title>Place Autocomplete Address Form</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
<style> 
    html, body, #map-canvas { 
    height: 100%; 
    margin: 0px; 
    padding: 0px 
    } 
</style> 
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script> 
<script> 
    // This example displays an address form, using the autocomplete feature 
// of the Google Places API to help users fill in the information. 

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

function initialize() { 
    // Create the autocomplete object, restricting the search 
    // to geographical location types. 
    autocomplete = new google.maps.places.Autocomplete(
     /** @type {HTMLInputElement} */(document.getElementById('autocomplete')), 
     { types: ['geocode'],componentRestrictions: { country: 'ie' } }); 
    // When the user selects an address from the dropdown, 
    // populate the address fields in the form. 
    google.maps.event.addListener(autocomplete, 'place_changed', function() { 
    fillInAddress(); 
    }); 
} 

// [START region_fillform] 
function fillInAddress() { 

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

    for (var component in componentForm) { 
    document.getElementById(component).value = ''; 
    document.getElementById(component).disabled = false; 
    } 

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

} 
// [END region_fillform] 

// [START region_geolocation] 
// Bias the autocomplete object to the user's geographical location, 
// as supplied by the browser's 'navigator.geolocation' object. 

// [END region_geolocation] 
</script> 

<style> 
    #locationField, #controls { 
    position: relative; 
    width: 480px; 
    } 
    #autocomplete { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 99%; 
    } 
    .label { 
    text-align: right; 
    font-weight: bold; 
    width: 100px; 
    color: #303030; 
    } 
    #address { 
    border: 1px solid #000090; 
    background-color: #f0f0ff; 
    width: 480px; 
    padding-right: 2px; 
    } 
    #address td { 
    font-size: 10pt; 
    } 
    .field { 
    width: 99%; 
    } 
    .slimField { 
    width: 80px; 
    } 
    .wideField { 
    width: 200px; 
    } 
    #locationField { 
    height: 20px; 
    margin-bottom: 2px; 
    } 
</style> 


</head> 

    <body onload="initialize()"> 
    <div id="locationField"> 
     <input id="autocomplete" placeholder="Enter your address" 
      onFocus="geolocate()" type="text"></input> 
    </div> 

<table id="address"> 
    <tr> 
    <td class="label">Street address</td> 
    <td class="slimField"><input class="field" id="street_number" 
      disabled="true"></input></td> 
    <td class="wideField" colspan="2"><input class="field" id="route" 
      disabled="true"></input></td> 
    </tr> 
    <tr> 
    <td class="label">City</td> 
    <td class="wideField" colspan="3"><input class="field" id="locality" 
      disabled="true"></input></td> 
    </tr> 
    <tr> 
    <td class="label">State</td> 
    <td class="slimField"><input class="field" 
      id="administrative_area_level_1" disabled="true"></input></td> 
    <td class="label">Zip code</td> 
    <td class="wideField"><input class="field" id="postal_code" 
      disabled="true"></input></td> 
    </tr> 
    <tr> 
    <td class="label">Country</td> 
    <td class="wideField" colspan="3"><input class="field" 
      id="country" disabled="true"></input></td> 
    </tr> 
</table>

燦任何人都可以使用'6 The Rise，Owenabue Heights，Carrigaline，Co。Co，Ireland'作爲例子來幫助我獲得完整的地址？

我想要忽略的部分owenabue高度以及。

在此先感謝

來源

2015-03-03 Ishq Mehta

這是你使用寫內容的循環：

for (var i = 0; i < place.address_components.length; i++) { 
    var addressType = place.address_components[i].types[0]; 
    if (componentForm[addressType]) { //can't find component with id=sublocality_level_1 
     var val = place.address_components[i][componentForm[addressType]]; 
     document.getElementById(addressType).value = val; 
    } 
}

當你要在你的循環addressType，你的邏輯寫的內容你componentForm，只如果組件可用。它使用以下條件：if (componentForm[addressType])。但是，addressType對於Owenabue Heights是sublocality_level_1。現在，您的HTML頁面中沒有任何文本框，其中包含id。所以，你需要創建新的控制/文本框，這樣你就可以寫入內容。

P.S：您可以打開調試器工具並查找place.address_components對象數組以查看信息。

來源

2015-03-03 14:34:41 Tachyon

谷歌自動完成跳過完整地址

回答

相關問題