【发布时间】：2021-04-19 04:34:24
【问题描述】：
我使用 Google API 在我的 HTML 表单上自动完成地址。我确实设法让它工作，但是，当我尝试将自动完成的地址传递给不同的字段时，例如街道号码、街道地址、城市、州、国家、邮政编码，它并没有填充到它们各自的文件中。我在下面添加了我的代码 - 任何建议都会非常感激：
HTML 代码：
<TR>
<TD>
<SPAN ID=_Datalead_enteryouraddress class=VIEWBOX >
<input type="text" CLASS=EDIT ID="autocomplete" name="lead_enteryouraddress" value="" maxlength=40 placeholder='Enter your address:*' onFocus="geolocate()" required>
<input type="hidden" name="_HIDDENlead_enteryouraddress" id="_HIDDENlead_enteryouraddress" value="" entryType="10">
</SPAN>
</TD>
</TR>
<TR>
<TD>
<SPAN ID=_Datalead_companyaddress1 class=VIEWBOX >
<input type="text" CLASS=EDIT ID="lead_companyaddress1" disabled="true" name="lead_companyaddress1" value="" maxlength=40 placeholder='Street Number:*' required>
<input type="hidden" name="_HIDDENlead_companyaddress1" id="_HIDDENlead_companyaddress1" value="" entryType="10">
</SPAN>
</TD>
</TR>
<TR>
<TD>
<SPAN ID=_Datalead_companyaddress2 class=VIEWBOX >
<input type="text" CLASS=EDIT ID="lead_companyaddress2" disabled="true" name="lead_companyaddress2" value="" maxlength=40 placeholder='Street Name:*' required>
<input type="hidden" name="_HIDDENlead_companyaddress2" id="_HIDDENlead_companyaddress2" value="" entryType="10">
</SPAN>
</TD>
</TR>
<TR>
<TD>
<SPAN ID=_Datalead_companycity class=VIEWBOX >
<input type="text" CLASS="jointodesc" disabled="true" ID="lead_companycity" name="lead_companycity" value="" maxlength=30 placeholder='Suburb:*' required>
<input type="hidden" name="_HIDDENlead_companycity" id="_HIDDENlead_companycity" value="" entryType="10">
</SPAN>
</TD>
</TR>
<TR>
<TD>
<SPAN ID=_Datalead_companystate class=VIEWBOX >
<input type="text" CLASS="EDIT" disabled="true" ID="lead_companystate" name="lead_companystate" value="" maxlength=30 placeholder='State:*' required>
<input type="hidden" name="_HIDDENlead_companystate" id="_HIDDENlead_companystate" value="" entryType="10">
</SPAN>
</TD>
</TR>
<TR>
<TD>
<SPAN ID=_Datalead_companypostcode class=VIEWBOX >
<input type="text" CLASS=EDIT ID="lead_companypostcode" disabled="true" name="lead_companypostcode" value="" maxlength=10 placeholder='Post Code:*' required>
<input type="hidden" name="_HIDDENlead_companypostcode" id="_HIDDENlead_companypostcode" value="" entryType="10">
</SPAN>
</TD>
</TR>
<TR>
<TD>
<SPAN ID=_Datalead_companycountry class=VIEWBOX >
<input type="text" CLASS=EDIT ID="lead_companycountry" disabled="true" name="lead_companycountry" value="" maxlength=10 placeholder='Country:*' required>
<input type="hidden" name="_HIDDENlead_companycountry" id="_HIDDENlead_companycountry" value="" entryType="10">
</SPAN>
</TD>
</TR>
Javascript 代码：
<script>
var placeSearch, autocomplete;
var componentForm = {
lead_companyaddress1: 'short_name',
lead_companyaddress2: 'long_name',
lead_companycity: 'long_name',
lead_companystate: 'short_name',
lead_companycountry: 'long_name',
lead_companypostcode: '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);
}
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;
}
}
}
// 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());
});
}
}
</script>
【问题讨论】：
标签： javascript html wordpress google-maps-api-3 autocomplete