Блог

У меня есть программа с модальным интерфейсом, внутри которого есть адресная строка и несколько (отключенных) входных данных для управления формами. При использовании адресной строки выдаются предложения по автозаполнению, и как только пользователь выбирает свой адрес, элемент управления формой автоматически вводит соответствующую информацию, относящуюся к искомому адресу. jQuery, используемый для такой функциональности, был получен из: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

У меня есть 3 отдельных модала, все из которых, как предполагается, выполняют одно и то же, однако, в нынешнем виде работает только один из них. Я попытался переименовать все переменные в разделе HTML (добавив 1), и я повторил код jQuery (также добавив 1 ко всем повторяющимся переменным). Консоль Chrome не выдает ошибок, и код компилируется, как ожидалось, однако для двух других режимов функция автозаполнения вообще не работает.

Первый модальный (часть его кода), который работает:

                                 <div id="locationField">
                                    <input id="autocomplete1" class="form-control" placeholder="Enter your address" onFocus="geolocate1()" type="text" />
                                </div>

                                <br />

                                <div>
                                    <img class="map-image" src="~/Images/yellow-map.PNG" />
                                </div>

                                <div>
                                    <label class="label-address">Street address</label>

                                    <input class="form-control" id="street_number1" style="text-align: left" readonly /> 
                                    
                                    <input class="form-control" id="route1" readonly />

                                    <label class="label-address">City</label>

                                    <input class="form-control" id="locality1" readonly />

                                    <label class="label-address">Province</label>

                                    <input class="form-control" id="administrative_area_level_11" readonly />

                                    <label class="label-address">Zip Code</label>

                                    <input class="form-control" id="postal_code1" readonly />

                                    <label class="label-address">Country</label>

                                    <input class="form-control" id="country1" readonly />
                                </div>
  

Код jQuery (скопированный по ссылке, упомянутой выше) для модального, который работает:

  //Autocomplete Address Form (DONATOR)
    var placeSearch, autocomplete;

    var componentForm = {
        street_number: 'short_name',
        route: 'long_name',
        locality: 'long_name',
        administrative_area_level_1: 'short_name',
        country: 'long_name',
        postal_code: 'short_name'
    };

    function initAutocomplete() {
        // Create the autocomplete object, restricting the search predictions to
        // geographical location types.
        autocomplete = new google.maps.places.Autocomplete(
            document.getElementById('autocomplete'), { types: ['geocode'] });

        // Avoid paying for data that you don't need by restricting the set of
        // place fields that are returned to just the address components.
        autocomplete.setFields(['address_component']);

        // When the user selects an address from the drop-down, 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 then fill-in 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());
            });
        }
    }
  

Second Modal (part of its code) which does not work:

                                 <div id="locationField">
                                    <input id="autocomplete1" class="form-control" placeholder="Enter your address" onFocus="geolocate1()" type="text" />
                                </div>

                                <br />

                                <div>
                                    <img class="map-image" src="~/Images/yellow-map.PNG" />
                                </div>

                                <div>
                                    <label class="label-address">Street address</label>

                                    <input class="form-control" id="street_number1" style="text-align: left" readonly /> 
                                    
                                    <input class="form-control" id="route1" readonly />

                                    <label class="label-address">City</label>

                                    <input class="form-control" id="locality1" readonly />

                                    <label class="label-address">Province</label>

                                    <input class="form-control" id="administrative_area_level_11" readonly />

                                    <label class="label-address">Zip Code</label>

                                    <input class="form-control" id="postal_code1" readonly />

                                    <label class="label-address">Country</label>

                                    <input class="form-control" id="country1" readonly />
                                </div>
  

Код jQuery (скопированный по ссылке, упомянутой выше) для модального, который не работает:

 var placeSearch1, autocomplete;

    var componentForm1 = {
        street_number1: 'short_name',
        route1: 'long_name',
        locality1: 'long_name',
        administrative_area_level_11: 'short_name',
        country1: 'long_name',
        postal_code1: 'short_name'
    };

    function initAutocomplete1() {
        // Create the autocomplete object, restricting the search predictions to
        // geographical location types.
        autocomplete = new google.maps.places.Autocomplete(
            document.getElementById('autocomplete1'), { types: ['geocode'] });

        // Avoid paying for data that you don't need by restricting the set of
        // place fields that are returned to just the address components.
        autocomplete.setFields(['address_component']);

        // When the user selects an address from the drop-down, populate the
        // address fields in the form.
        autocomplete.addListener('place_changed', fillInAddress1);
    }

    function fillInAddress1() {
        // Get the place details from the autocomplete object.
        var place1 = autocomplete.getPlace();

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

        // Get each component of the address from the place details,
        // and then fill-in the corresponding field on the form.
        for (var i1 = 0; i1 < place1.address_components.length; i1  ) {
            var addressType1 = place1.address_components[i1].types[0];
            if (componentForm1[addressType1]) {
                var val1 = place1.address_components[i1][componentForm1[addressType1]];
                document.getElementById(addressType1).value = val1;
            }
        }
    }

    // Bias the autocomplete object to the user's geographical location,
    // as supplied by the browser's 'navigator.geolocation' object.
    function geolocate1() {
        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());
            });
        }
    }
  

Я предполагаю, что проблема заключается в повторяющемся коде jQuery? В противном случае я не уверен. Хотелось бы получить некоторые рекомендации.