Google 地图会在选择地址时设置文本字段值

Question

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

我正在使用的自动完成表单由 2 张地图组成。

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

我可以通过自动完成搜索来做到这一点，但是当选择搜索结果时，我真的需要它自动执行此操作。

这是 HTML 的一个片段

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

蒂亚

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 字段上。我会尝试从那里解决它。

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