Question

所以我从一天开始工作，使我的表单自动完成。请查看以下链接：

http://test.oliveenterprisedemo.in/

它有谷歌自动完成代码。

除了大地址

外，它完全正常

例如：如果我进入The Rise，Blackrock，Ireland＆＃39;我把它正确分类到不同的盒子里。但是，如果我进入“The Rise，Owenabue Heights，Carrigaline，Co。Cork，Ireland＆＃39;它会跳过我不想发生的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>

任何人都可以帮助我使用＆＃39; 6 The Rise，Owenabue Heights，Carrigaline，Co。Cork，Ireland＆＃39;举个例子？

我也希望忽略部分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])。但是，addressType的{{1}}为Owenabue Heights。现在，您的HTML页面中没有sublocality_level_1的任何文本框。因此，您需要使用id创建新的控件/文本框，以便您可以向其中写入内容。

P.S：您可以打开调试工具并查找id="sublocality_level_1"对象数组以查看信息。

Google自动填充功能会跳过完整地址

1 个答案: