Question

（抱歉我的英语有限）。

我使用Google地方自动填充功能（https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform?hl=FR）作为地址表单，我需要修改输入ID。

目前结果以这种形式显示：

<input class="field" id="street_number"  disabled="true"></input>
<input class="field" id="route" disabled="true">
<input class="field" id="locality" disabled="true">
<input class="field" id="administrative_area_level_1" disabled="true"></input>
<input class="field" id="postal_code" disabled="true">
<input class="field" id="country" disabled="true"></input>

但我需要有类似的东西：

<input class="field" id="streetnumb"  disabled="true"></input>
<input class="field" id="rue" disabled="true">
<input class="field" id="ville" disabled="true">
<input class="field" id="departement" disabled="true"></input>
<input class="field" id="cp" disabled="true">
<input class="field" id="pays" disabled="true"></input>

你能帮我吗？

Answer 1

我遇到了同样的问题。我刚刚更改了fillInAddress函数以使用输入名称（getElementsByName）而不是ID

JS

function fillInAddress() {
        var place = autocomplete.getPlace();

        for (var component in componentForm) {
            document.getElementsByName(component)[0].value = '';
            document.getElementsByName(component)[0].disabled = false;
        }

        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.getElementsByName(addressType)[0].value = val;                
            }
        }
    }

HTML

<input class="field" name="street_number" id="streetnumb"  disabled="true"></input>
<input class="field" id="rue" name="route" disabled="true">
<input class="field" id="ville" name="locality" disabled="true">
<input class="field" id="departement" name="administrative_area_level_1" disabled="true"></input>
<input class="field" id="cp" name="postal_code" disabled="true">
<input class="field" id="pays" name="country" disabled="true"></input>

Answer 2

创建一个额外的对象来解析您的ID的地址类型：

var componentResolver = {
  street_number: 'streetnumb',
  route: 'rue',
  locality: 'ville',
  country: 'country',
  ...
};

在fillInAddress（）函数中，从

更改最后一行代码

document.getElementById(addressType).value = val;

到

document.getElementById(componentResolver[addressType]).value = val;

Answer 3

这对我有用。也许它不是最好的解决方案，而是工作的解决方案。 :)您可以将id更改为您想要的任何内容并像这样处理它。

JS

  function fillInAddress() {
    var place = autocomplete.getPlace();

    document.getElementById('user_city').value = '';
    document.getElementById('user_country').value = '';
    document.getElementById('country').value = '';
    document.getElementById('user_zip').value = '';
    document.getElementById('user_city').disabled = false;
    document.getElementById('user_country').disabled = false;
    document.getElementById('country').disabled = false;
    document.getElementById('user_zip').disabled = false;

    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]];
        var field = addressType;

        if(field=="country") {
          document.getElementById('country').value = val;
          document.getElementById("user_country").value = place.address_components[i].short_name;
        }

        if(field=="locality") {
          document.getElementById('user_city').value = val;
        }

        if(field=="postal_code") {
          document.getElementById('user_zip').value = val;
        }

        if(field=="street_number") {
          var streetnum = document.getElementById('user_street').value = val;
        }

        // Join street number with street to one input
        if(field=="route") {
          if(streetnum) {
            completeadress = streetnum + ' ' + val;
          }
          else {
            completeadress = val;
          }
          document.getElementById('user_street').value =  completeadress;
        }
      }
    }
  }

HTML

<input class="field" name="user[city]" id="user_city" disabled="true"></input>
...

Google自动填充地址 - 如何更改输入ID

3 个答案: