Question

我正在使用Google Javascript API自动填充功能在我正在创建的网络应用程序上设置地址验证系统。该系统运行良好。您开始键入地址，然后单击完整地址并填写字段。字段完成后，将显示它们，每个字段都有一个唯一的标识符，用于地址的每个部分。

目前，内部版本号显示在地址的单独字段中（即建筑物编号：101道路名称：测试大道）。我想改变这个，以便将建筑物编号和道路名称结合起来（即地址：101 Test Avenue）。

以下是填写输入字段的代码

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

street_number指的是建筑物编号，而路线指的是道路名称。

我尝试过如下组合，但输出'undefined'。请有人帮忙。

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

Fiddle with the undefined issue

Answer 1

一种选择是更改填写表单的代码以捕获要组合的两个数据，然后将它们组合到表单中的所需字段中。

proof of concept fiddle

组合street_number和路线字段的代码段：

＆＃13;

window.location.href = "mailto:[myadress]?subject=[formname]&body[his inputs]";
window.location = "index.html"

＆＃13;

// 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: '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);
}

// [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.
    var fullAddress = [];
    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;
      }
      if (addressType == "street_number") {
        fullAddress[0] = val;
      } else if (addressType == "route") {
        fullAddress[1] = val;
      }
    }
    document.getElementById('fullAddr').value = fullAddress.join(" ");
    if (document.getElementById('fullAddr').value !== "") {
      document.getElementById('fullAddr').disabled = false;
    }
  }
  // [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.
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());
      });
    }
  }
  // [END region_geolocation]
google.maps.event.addDomListener(window, 'load', initAutocomplete)

＆＃13;

#locationField,
#controls {
  position: relative;
  width: 480px;
}
#autocomplete {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 99%;
}
.label {
  text-align: right;
  font-weight: bold;
  width: 150px;
  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;
}
.doubleField {
  width: 400px;
}
#locationField {
  height: 20px;
  margin-bottom: 2px;
}

＆＃13;

Google Place自动填充地址表单合并了street_number和路线字段

1 个答案: