如何命名 HTML 输入 ID 不同于 address_component 的 Google 地点 API？

Question

此代码通过将地址组件提取到单独的表单字段中正常工作，但我的问题是它迫使我将 HTML 输入 ID 命名为与地址组件相同的名称。例如，对于下面的 .js 代码，我需要：

<html>
<input id="postal_code"> and
<input id="locality">
</html>

我如何更改 .js 语法，以便它仍然检索 "postal_code" 和 "locality" 组件，但将它们放入我命名的表单字段中：

<html>
<input id="zip_code"></input> and
<input id="city"></input>
</html>

这是（完整的）javascript；我原来的 post 只有一个片段：

  var placeSearch, autocomplete;
  var componentForm = {
    street_number: 'short_name',
    postal_code: 'long_name',
    locality: 'long_name',
    country: 'short_name',
   };
 var defaultBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(40.790908, -79.766323),
    new google.maps.LatLng(-28.246058, 22.318632));

 function initAutocomplete() {
  autocomplete = new google.maps.places.Autocomplete(
  (document.getElementById('typeaddress')),
  {bounds: defaultBounds,
  types: ['address']});
  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;
      }
    }
  }

Answer 1

您需要一个数据结构来将您的表单 ID 映射到地址组件值。这可以是任何东西，但这里有一个例子。

var componentForm = {
  locality: {
    formId: 'city',
    addressComponentKey: 'long_name'
  },
  postal_code: {
    formId: 'zip_code',
    addressComponentKey: 'short_name'
  }
}

function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = getPlace();
  for (var component of componentForm) {
    document.getElementById(component.formId).value = '';
    document.getElementById(component.formId).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].addressComponentKey];
      document.getElementById(componentForm[addressType].formId).value = val;
    }
  }
}

https://stackblitz.com/edit/google-places-form

Answer 2

By the way, I think the "short name" "long name" entries are just to tell the Google Places API whether or not to abbreviate country names, etc.

更像是 API 响应包含很多字段，您正在使用该数据结构来选择为每个位置组件选择哪个字段。

使用从 google 的名字到您的名字的映射是正确的答案。一种替代方法是将您的选择器更改为：

document.getElementById(addressType).value = val;

收件人：

document.getElementById(
    new Map([
        ["postal_code", "zip_code"],
        ["locality", "city"],
    ]).get(addressType)
).value = val;

如何命名 HTML 输入 ID 不同于 address_component 的 Google 地点 API？

How can I name the HTML input ID differently than than the address_component for Google Places API?

javascript

data-mapping

google-places-api