我正在使用Google API进行地址搜索,而且我完全了解了它。
我尝试使用CSS格式化数据,它看起来像这样:
这是我的CSS代码:
.pac-container:after {
/* Disclaimer: not needed to show 'powered by Google' if also a Google Map is shown */
background-image: none !important;
height: 0px;
}
.pac-item-query
{
color:red;
}
.pac-item
{
padding:20px;
}
但我希望我的地址框看起来像这样
这是调用api并显示结果的代码:
function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical
// location types.
callDebugger();
autocomplete = new google.maps.places.Autocomplete(
(
document.getElementById('autocomplete')), {
types: ['geocode'],
componentRestrictions: countryRestrict
});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
autocomplete.addListener('place_changed', fillInAddress);
document.getElementById('countrys').addEventListener(
'change', setAutocompleteCountry);
}
function fillInAddress() {
callDebugger();
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
var check = [];
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++) {
callDebugger();
var addressType = place.address_components[i].types[0];
check.push(addressType);
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
// console.log(zipcode);
zipcode = check.includes("postal_code");
sessionStorage.setItem("zipcode", zipcode);
// console.log(check);
}
这是HTML:
<div class="form-field half">
<label for="usr">Business Address</label>
<input id="autocomplete" type="text" class="w-input" data-rule-required="true" name="address" placeholder="Address" onFocus="geolocate()" />
</div>