Как я могу назвать идентификатор ввода HTML иначе, чем адрес_компонента для API Google Адресов? - PullRequest
Новая
       18

Как я могу назвать идентификатор ввода HTML иначе, чем адрес_компонента для API Google Адресов?

0 голосов
/ 05 декабря 2018

Этот код работает правильно, извлекая компоненты адреса в отдельные поля формы, но моя проблема в том, что он заставляет меня называть HTML-идентификатор ввода идентичным компоненту адреса.Например, с приведенным ниже кодом .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;мой оригинальный пост был только фрагмент этого: 

  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;
      }
    }
  }

Ответы [ 2 ]

0 голосов
/ 07 декабря 2018

Кстати, я думаю, что записи "короткое имя" и "длинное имя" просто указывают API Google Адресов, сокращать или нет названия стран и т. Д.

Подробнеенапример, ответ API включает в себя множество полей, и вы используете эту структуру данных, чтобы выбрать, какое поле выбрать для каждого компонента места.

Использование сопоставления имени Google и вашего - правильный ответ.В качестве альтернативы можно изменить селектор с: 

document.getElementById(addressType).value = val;

На: 

document.getElementById(
    new Map([
        ["postal_code", "zip_code"],
        ["locality", "city"],
    ]).get(addressType)
).value = val;
0 голосов
/ 05 декабря 2018

Вам потребуется структура данных, которая сопоставляет идентификаторы вашей формы со значениями компонента адреса.Это может быть что угодно, но вот пример. 

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

...