这可能是代表我的某个新手错误，我无法看到我出错的地方。我一直在使用Google Places API并创建了一个表单，我打算与CF7兼容（联系表单7）。
旁注＆＃34;我还在学习JS。＆＃34;
我还没有真正涉足这个API，所以我觉得它是时候开始探索，至少在基础知识方面。这一切都很有趣，至少在你碰到砖墙之前。我希望这里有人可以帮助阐明自动填充如何填充表单组件，更具体地说，如何选择表单组件并与正确的数据配对。 （如果这是有道理的。）
- 我的研究
最初，我开始使用一个自动完成的基础，我发现here有一点玩法，然后继续研究一个我发现谷歌礼貌的例子here。我研究了一些API文档here，并最终调整了我自己的版本here，并在网络上找到了混合代码。
- 我的目标
我想要实现的是用户在正确的相应字段中填充正确选择的数据。但是，我永远无法让城市为英国工作。
- 我的问题
在大量修改HTML并调整JS后，表单组件才开始拒绝数据（不显示任何数据）。正如我之前提到的，这可能是某个地方的新手错误，但我无法看到它。
// [START region_fillform]
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
document.getElementById("latitude").value = place.geometry.location.lat();
document.getElementById("longitude").value = place.geometry.location.lng();
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;
}
}
}
// [END region_fillform]
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.
$("#autocomplete").on('focus', function() {
geolocate();
});
var placeSearch, autocomplete;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_2: 'short_name',
country: 'long_name',
postal_code: 'short_name'
};
function initialize() {
// Create the autocomplete object, restricting the search
// to geographical location types.
autocomplete = new google.maps.places.Autocomplete(
/** @type {HTMLInputElement} */
(document.getElementById('autocomplete')), {
types: ['geocode'],
componentRestrictions: {
country: 'gb'
} // Limit to UK Addresses Only.
});
// When the user selects an address from the dropdown,
// populate the address fields in the form.
google.maps.event.addListener(autocomplete, 'place_changed', function() {
fillInAddress();
});
}
// [START region_fillform]
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
document.getElementById("latitude").value = place.geometry.location.lat();
document.getElementById("longitude").value = place.geometry.location.lng();
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]
initialize();
// [END region_geolocation]/* -- Default Override -- */
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
h2 {
padding: .5em .4em;
font-family: "Open Sans", Arial, Helvetica, sans-serif !important;
font-size: 24px;
font-weight: 200 !important;
letter-spacing: 1.6px !important;
}
/* -- Center Element -- */
.ele {
background-color: #f2f2f2;
border: solid 1.5px #4f4f4f;
width: 750px;
padding: 3%;
}
/* -- Form Styles -- */
/* Text Field Font */
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
input[type='submit'] {
padding: 1.2em 0;
width: 97.8%;
margin: .5em .5em;
font-family: "Open Sans", Arial, Helvetica, sans-serif !important;
font-size: 14px;
font-weight: 200 !important;
letter-spacing: 1.6px !important;
text-transform: uppercase;
background-color: #9cc320;
color: #fff;
transition: ease .3s;
border: solid 1.5px #9cc320;
}
input[type='submit']:hover {
color: #4f4f4f;
background-color: #fff;
transition: ease .3s;
border: solid 1.5px #4f4f4f;
cursor: pointer;
}
input[type='text'],
input[type='email'],
input[type='tel'],
textarea {
width: 100%;
padding: 1em;
font-family: "Open Sans", Arial, Helvetica, sans-serif !important;
font-size: 14px;
font-weight: 200 !important;
letter-spacing: 1.6px !important;
text-transform: uppercase;
color: #272727;
border: none;
resize: none;
}
.none {
Display: none;
}
/* -- Form Layout -- */
.col {
float: left;
padding: .5em;
}
.col-full {
width: 100%;
}
.col-half {
width: 50%;
}
.col-third {
width: 33.3%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="wrap" class="ele center">
<div id="ctt-frm">
<h2>
Request your sample!
</h2>
<div class="col col-half">
<label aria-label="First Name Field"><span class="wpcf7-form-control-wrap first-name"><input type="text" name="first-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="FIRST NAME *" /></span></label>
</div>
<div class="col col-half">
<label aria-label="Last Name Field"><span class="wpcf7-form-control-wrap last-name"><input type="text" name="last-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="LAST NAME *" /></span></label>
</div>
<div class="col col-half">
<label aria-label="Email Field"><span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" placeholder="EMAIL *" /></span></label>
</div>
<div class="col col-half">
<label aria-label="Telephone Field"><span class="wpcf7-form-control-wrap your-tel"><input type="tel" name="your-tel" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel" aria-required="true" aria-invalid="false" placeholder="TELEPHONE *" /></span></label>
</div>
<div class="col col-full">
<label aria-label="Autocomplete Field"><span class="wpcf7-form-control-wrap your-auto"><input type="text" id="autocomplete" name="your-auto" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" placeholder="PLEASE ENTER YOUR ADDRESS" /></span></label>
</div>
<div class="col col-full none">
<input type="text" id="street_number" name="street-number" value="" size="40" class="none" aria-required="true" aria-invalid="false" placeholder="000" Disabled />
<input type="text" id="route" name="route" value="" size="40" class="none" aria-required="true" aria-invalid="false" placeholder="Route" Disabled />
<input type="text" id="country" name="country" value="" size="40" class="none" aria-required="true" aria-invalid="false" placeholder="country" Disabled />
</div>
<div class="col col-full">
<label aria-label="Address Line 1 Field"><span class="wpcf7-form-control-wrap your-add1"><input type="text" id="fullAddr" name="your-add1" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="ADDRESS LINE 1 *" /></span></label>
</div>
<div class="col col-full">
<label aria-label="Address Line 2 Field"><span class="wpcf7-form-control-wrap your-add2"><input type="text" name="your-add2" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-required="true" aria-invalid="false" placeholder="ADDRESS LINE 2" /></span></label>
</div>
<div class="col col-third">
<label aria-label="City Town Field"><span class="wpcf7-form-control-wrap your-city"><input type="text" id="locality" name="your-city" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="CITY / TOWN *" /></span></label>
</div>
<div class="col col-third">
<label aria-label="County Field"><span class="wpcf7-form-control-wrap your-county"><input type="text" id="administrative_area_level_2" name="your-county" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="COUNTY *" /></span></label>
</div>
<div class="col col-third">
<label aria-label="Postal Code Field"><span class="wpcf7-form-control-wrap your-postcode"><input type="text" id="postal_code" name="your-postcode" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="POSTAL CODE *" /></span></label>
</div>
<p class="col col-full">
<label aria-label="Message Area"><span class="wpcf7-form-control-wrap message-body"><textarea name="message-body" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="MESSAGE * ( Please list any additional information here. )"></textarea></span></label>
</p>
<p>
<input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" />
</p>
</div>
</div>
我很感激我能得到的任何帮助，非常感谢。
此致 - B
编辑：27年9月27日
在世界上最头痛的问题之后，我终于开始工作了;我了解到，如果缺少一个或两个字段，它将会放置值。更具体地说是Lat和Lon。
解决方案是添加这些字段并禁用它们，同时使它们显示：无;＆＃39;。我的代码可能不是最干净的，但它可能是其他人的垫脚石。
以下是完整的JS Fiddle。
我仍然希望看到如何用英国的正确ISO构建js。如果有人可以提供帮助，我会很高兴。
此致 - B.