我想格式化我的Google API自动填充数据

时间:2018-03-16 06:55:36

标签: javascript css google-places-api googleplacesautocomplete

我正在使用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;   
}

但我希望我的地址框看起来像这样

this is the result i want

这是调用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>

0 个答案:

没有答案