如何将地址字段（如街道号码）更改为地址 1 以用于地方自动完成地址表单 - Google？

Question

我正在尝试将 id="street_number" 更改为 id="address1" 但是当我这样做时它停止工作，因为我更改了字段 ID。那么我如何将 id 更改为 address1 并使其仍然有效？由于谷歌不允许我将 id 更改为 address1 或任何其他名称。

对不起，如果它仍然令人困惑。 我从以下链接复制了代码： https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

现在，在上面的链接中，他们提供了如下 html 代码：

<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>
    <!-- Note: Selection of address components in this example is typical.
         You may need to adjust it for the locations relevant to your app. See
         https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
    -->
    <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>

因此，如果有人知道我可以如何将上面提供的字段 ID 更改为其他内容，然后地址字段将由谷歌按照上面链接示例中显示的方式填充。

Google 不允许使用以下代码自定义 ID 字段，就好像我更改了 ID 然后它通过不填充该 ID 的文本框而停止工作。

var placeSearch, autocomplete;
  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() {
    // 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(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]];
        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

在 HTML 和 JS 中将 street_number 更改为 address1，如下所示：

HTML：

<td class="slimField"><input class="field" id="address1"
      disabled="true"></input></td>

JS：

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

因为Google Maps API使用street_number作为key，所以你也需要稍微修改一下JS代码：

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(place.address_components[i].types[0] == 'street_number') {
        var addressType = 'address1';
      }

     if (componentForm[addressType]) {
         var val = place.address_components[i][componentForm[addressType]];
         document.getElementById(addressType).value = val;
     }
   }
}

正如您在上面看到的，我在var addressType = place.address_components[i].types[0]; 之后添加了一个条件来检查它是否为street_number，然后将其替换为address1，这样google 就知道要与哪个元素绑定街道号码。

if(place.address_components[i].types[0] == 'street_number') {
    var addressType = 'address1';
}

演示： https://jsfiddle.net/o7rx90dg/1/