选择地址时谷歌地图设置文本字段值

Question

我正在尝试在搜索地址时如何设置名为 rehabGroup 的文本字段的值。

我使用的自动完成表单包含 2 个地图。

我需要从位置返回结果中获取值，并使用它来搜索名称列表以将结果返回到文本字段。

我可以通过自动完成搜索来做到这一点，但我真的需要它在选择搜索结果时自动完成。

这是 HTML 的 sn-p

<div id="map2"></div>
   <div class="form-group">
      <label class="control-label" for="autocomplete2">Search for Encounter Address</label>
         <i class="h5 fas fa-map-pin"></i>
            <div class="input-group">
               <input id="autocomplete2" />
            </div>
   </div>
   <div class="form-group">
      <label class="control-label" for="locality">Town/Suburb</label>
         <i class="h5 far fa-map"></i>
            <div class="input-group">
               <input type="text" class=" form-control rounded" id="locality2" name="locality2" placeholder="Town of the rescue" data-toggle="tooltip" title="Town of rescue" />
            </div>
    </div>
    <div class="form-group">
       <label class="control-label" for="rehabGroup">Rehab Group</label>
          <i class="h5 fas fa-map-pin"></i>
             <div class="input-group">
                <input type="text" id="rehabGroup" name="rehabGroup" value=""  />
             </div>
    </div>

这是我一直在使用的代码

<script>
                $(function() {
                    $('#locality2').autocomplete({
                        source: 'ajax.php',
                        minLength: 3,
                        change: function (event, ui) {
                            if (!ui.item) {
                                $(this).val('');
                                $(this).focus();
                            }
                        },
                        select: function(event, ui) {
                            $('#rehabGroup').val(ui.item.rehabGroup);
                        }
                    });
                });
                let placeSearch, autocomplete, autocomplete2;
                let componentForm = {
                    subpremise: 'long_name',
                    street_number: 'short_name',
                    route: 'long_name',
                    locality: 'long_name',
                    administrative_area_level_1: 'short_name',
                    administrative_area_level_2: 'long_name',
                    country: 'long_name',
                    postal_code: 'short_name',
                    latitude: 'long_name',
                    longitude: 'short_name'
                };

                let defaultBounds = new google.maps.LatLngBounds(
                    new google.maps.LatLng(-32.889049, 151.600815),
                    new google.maps.LatLng(-32.506633, 152.340289)
                );

                let map1 = new google.maps.Map(document.getElementById('map1'), {
                    center: {
                        lat: -32.732140,
                        lng: 152.039616
                    },
                    zoom: 11
                });

                let map2 = new google.maps.Map(document.getElementById('map2'), {
                    center: {
                        lat: -32.732140,
                        lng: 152.039616
                    },
                    zoom: 11
                });

                let marker1 = new google.maps.Marker({
                    map: map1,
                    draggable: true
                });

                let marker2 = new google.maps.Marker({
                    map: map2,
                    draggable: true
                });

                google.maps.event.addListener(marker1, 'dragend',
                    function(marker1) {
                        let latLng1 = marker1.latLng;
                        currentLatitude1 = latLng1.lat();
                        currentLongitude1 = latLng1.lng();
                        $('#lat').val((currentLatitude1).toFixed(6));
                        $('#lng').val((currentLongitude1).toFixed(6));
                    }
                );
                google.maps.event.addListener(marker2, 'dragend',
                    function(marker2) {
                        let latLng2 = marker2.latLng;
                        currentLatitude2 = latLng2.lat();
                        currentLongitude2 = latLng2.lng();
                        $('#lat2').val((currentLatitude2).toFixed(6));
                        $('#lng2').val((currentLongitude2).toFixed(6));
                    }
                );

                function initAutocomplete() {
                    // Create the autocomplete object, restricting the search to geographical
                    // location types.
                    autocomplete = new google.maps.places.Autocomplete(
                        /** @type {!HTMLInputElement} */
                        (document.getElementById('autocomplete')), {
                            bounds: defaultBounds,
                            types: [
                                'geocode'
                            ],
                            strictBounds: true,
                            componentRestrictions: {
                                country: 'au'
                            }
                        });
                    // When the user selects an address from the dropdown, populate the address
                    // fields in the form.
                    autocomplete.addListener('place_changed', function() {
                        fillInAddress(autocomplete, '');
                    });

                    autocomplete2 = new google.maps.places.Autocomplete(
                        /** @type {!HTMLInputElement} */
                        (document.getElementById('autocomplete2')), {
                            bounds: defaultBounds,
                            types: [
                                'geocode'
                            ],
                            strictBounds: true,
                            componentRestrictions: {
                                country: 'au'
                            }
                        });
                    autocomplete2.addListener('place_changed', function() {
                        fillInAddress(autocomplete2, '2');
                    });
                }

                function fillInAddress(autocomplete, unique) {
                    // Get the place details from the autocomplete object.
                    let place = autocomplete.getPlace();
                    if (unique === '2'){
                        if (place.geometry.viewport) {
                            map2.fitBounds(place.geometry.viewport);
                        } else {
                            map2.setCenter(place.geometry.location);
                            map2.setZoom(14);
                        }
                        marker2.setPosition(place.geometry.location);
                        marker2.setVisible(true);
                    }else{
                        if (place.geometry.viewport) {
                            map1.fitBounds(place.geometry.viewport);
                        } else {
                            map1.setCenter(place.geometry.location);
                            map1.setZoom(14);
                        }
                        marker1.setPosition(place.geometry.location);
                        marker1.setVisible(true);
                    }

                    for (let component in componentForm) {
                        if (!!document.getElementById(component + unique)) {
                            document.getElementById(component + unique).value = '';
                            document.getElementById(component + unique).disabled = false;
                        }
                    }
                    // Get each component of the address from the place details
                    // and fill the corresponding field on the form.
                    for (let i = 0; i < place.address_components.length; i++) {
                        let addy = '';
                        let addressTypes = place.address_components[i].types;
                        for (let j = 0; j < addressTypes.length; j++) {
                            let addressType = addressTypes[j];
                            if (componentForm[addressType] && document.getElementById(addressType + unique)) {
                                addy = place.address_components[i][componentForm[addressType]];
                                document.getElementById(addressType + unique).value = addy;
                            }
                        }
                    }
                    document.getElementById('lat' + unique).value = place.geometry.location.lat().toFixed(6);
                    document.getElementById('lng' + unique).value = place.geometry.location.lng().toFixed(6);
                }
                google.maps.event.addDomListener(window, 'load', initAutocomplete);
            </script>

TIA

Answer 1

从“自动完成”下拉列表中选择地址后，您似乎可以成功填充地址表单。当您找到地址的locality 组件时，您只需向 fillInAddress() 添加另一个步骤，以调用您的自定义函数来搜索您的组名并填充文本字段。

function fillInAddress(autocomplete, unique) {
                    // Get the place details from the autocomplete object.
                    let place = autocomplete.getPlace();
                    if (unique === '2'){
                        if (place.geometry.viewport) {
                            map2.fitBounds(place.geometry.viewport);
                        } else {
                            map2.setCenter(place.geometry.location);
                            map2.setZoom(14);
                        }
                        marker2.setPosition(place.geometry.location);
                        marker2.setVisible(true);
                    }else{
                        if (place.geometry.viewport) {
                            map1.fitBounds(place.geometry.viewport);
                        } else {
                            map1.setCenter(place.geometry.location);
                            map1.setZoom(14);
                        }
                        marker1.setPosition(place.geometry.location);
                        marker1.setVisible(true);
                    }

                    for (let component in componentForm) {
                        if (!!document.getElementById(component + unique)) {
                            document.getElementById(component + unique).value = '';
                            document.getElementById(component + unique).disabled = false;
                        }
                    }
                    // Get each component of the address from the place details
                    // and fill the corresponding field on the form.
                    for (let i = 0; i < place.address_components.length; i++) {
                        let addy = '';
                        let addressTypes = place.address_components[i].types;
                        for (let j = 0; j < addressTypes.length; j++) {
                            let addressType = addressTypes[j];
                            if (componentForm[addressType] && document.getElementById(addressType + unique)) {
                                addy = place.address_components[i][componentForm[addressType]];
                                document.getElementById(addressType + unique).value = addy;
                            }
                            if (addressType == 'locality') {
                                // Perform your custom search on this locality and populate the result in text field rehabGroup
                                let locality = place.address_components[i]['long_name'];
                                let result = yourCustomSearch(locality);
                                document.getElementbyId('rehabGroup').value = result;
                            }
                        }
                    }
                    document.getElementById('lat' + unique).value = place.geometry.location.lat().toFixed(6);
                    document.getElementById('lng' + unique).value = place.geometry.location.lng().toFixed(6);
                }

Answer 2

谢谢，我已经让它工作了，但它发生在 locality 和 locality2 fields 上。我会尝试从那里解决它。

if (addressType === 'locality') {
                                // Perform your custom search on this locality and populate the result in text field rehabGroup
                                let locality2 = place.address_components[i]['long_name'];
                                //Carry out a GET Ajax request using JQuery
                                $.ajax({
                                    //The URL of the PHP file that searches MySQL.
                                    type: 'GET',
                                    url: 'ajax.php',
                                    data: {
                                        locality2: locality2
                                    },
                                    success: function(data){
                                        let obj = data;
                                        alert(cut);
                                        document.getElementById('rehabGroup').value = cut;
                                    }
                                });
                            }