Question

我试图做以下事情;

我有两个地址自动填充我的两个自动填充功能正在运行，但我在文档中没有想到如何添加多个自动填充地址表格

Documentation about Place Autocomplete Address Form

<script>
var placeSearch, autocomplete;
var componentForm = {
    street_number: 'short_name',
    route: 'long_name',
    administrative_area_level_1: 'short_name',
    administrative_area_level_2: 'long_name',
    country: 'long_name',
    postal_code: 'short_name',
    sublocality_level_1: 'long_name'
};

function initAutocomplete() {
    autocomplete = new google.maps.places.Autocomplete(
    /** @type {!HTMLInputElement} */(document.getElementById('addressCollectionClient')), {
        types: ['geocode'],
        componentRestrictions: {
        country: "br"
        }
    });

    autocomplete.addListener('place_changed', function () {
    fillInAddress(autocomplete, "");
    });

    autocomplete2 = new google.maps.places.Autocomplete(
    /** @type {!HTMLInputElement} */(document.getElementById('addressDeliveryClient')), {
        types: ['geocode'],
        componentRestrictions: {
        country: "br"
        }
    });

    autocomplete2.addListener('place_changed', function () {
    fillInAddress(autocomplete2, "2");
    });
}

function fillInAddress() {
    var place = autocomplete.getPlace();

    for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
    }

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

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>

我可能需要添加一个新的地址表单并为地址表单添加新的ID？

<div class="col s12" hidden>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA2AveydWbRlmJPXI2UV1FyrCPgJ6G64Y0&libraries=places&callback=initAutocomplete"></script>
    <link rel="stylesheet" type="text/css" href="css/address-live-search/native.css">
    <link rel="stylesheet" type="text/css" href="css/address-live-search/button_help/structure.css">
    <link rel="stylesheet" type="text/css" href="css/address-live-search/button_help/tooltip.css">
    <tr>
    <td class="label">Street address</td>
    <td class="slimField">
        <input class="field" id="street_number" disabled="true">
    </td>
    <td class="wideField" colspan="2">
        <input class="field" id="route" disabled="true">
    </td>
    </tr>
    <tr>
    <td class="label">City</td>
    <td class="wideField" colspan="3">
        <input class="field" id="administrative_area_level_2" disabled="true">
    </td>
    </tr>
    <tr>
    <td class="label">State</td>
    <td class="slimField">
        <input class="field" id="administrative_area_level_1">
    </td>
    <td class="label">Zip code</td>
    <td class="wideField">
        <input class="field" id="postal_code" name="postal_code">
    </td>
    </tr>
    <tr>
    <td class="label">Neighbourhood</td>
    <td class="wideField">
        <input class="field" id="sublocality_level_1" disabled="true">
    </td>
    </tr>
    <tr>
    <td class="label">Country</td>
    <td class="wideField" colspan="3">
        <input class="field" id="country">
    </td>
    </tr>
</div>

感谢您的帮助：]

如何添加多个地方自动填充地址表单？

0 个答案: