Google 自动完成跳过完整地址

Question

所以我一天都在努力让我的表单自动完成。检查下面的 link：

http://test.oliveenterprisedemo.in/

它有 google 自动完成代码。

它工作得很好，除了大地址

例如：如果我输入 'The Rise, Blackrock, Ireland'，我会将它正确地分类到不同的框中。但是，如果我输入“6 The 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. Cork, Ireland”为例获得完整地址吗？

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

提前致谢

Answer 1

这是您用来写入内容的循环：

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])。但是，Owenabue Heights 的 addressType 是 sublocality_level_1。现在，您的 HTML 页面中没有任何带有 id 的文本框。因此，您需要使用 id="sublocality_level_1" 创建新的 control/text 框，以便您可以向其中写入内容。

P.S: 您可以打开调试器工具并查找 place.address_components 对象数组以查看信息。

Google 自动完成跳过完整地址

Google autocomplete skipping the full address

html

api

jquery

autocomplete

google-api