Googlemaps通过className放置自动完成-JS循环问题

Question

我需要通过ClassName将自动完成添加到输入字段中。我让它工作，但谷歌没有发送地址与Postalcode回。

因此，我尝试使用addListener在输入字段中插入formatted_address。

在本例中，autocomplete.addListener上的输入[i]不起作用：

function initMap() {

var input = $('.my_adresse'); 

for (i = 0; i < input.length; i++) {
var autocomplete = new google.maps.places.Autocomplete(input[i], {
types: ['address'],
componentRestrictions: {
'country': ["de", "ch", "aut"]
}
});


autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
$(input[i]).val(place.formatted_address);
});
}          
} 

在这个例子中，只有循环的最后一个元素在起作用：

var input = $('.my_adresse'); 

for (i = 0; i < input.length; i++) {
var autocomplete = new google.maps.places.Autocomplete(input[i], {
types: ['address'],
componentRestrictions: {
'country': ["de", "ch", "aut"]
}
}); 

var input_to_change= input[i];
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
$(input_to_change).val(place.formatted_address);
});
}          
} 

为什么我只得到循环的最后一个元素？使用谷歌地图自动完成位置获取带有邮政编码的完整地址的最佳解决方案是什么？

Answer 1

解决此问题的一种方法是使用函数闭包，创建一个createAutocomplete函数来保持输入和自动完成对象的闭包：

function createAutocomplete(input, index) {
var autocomplete = new google.maps.places.Autocomplete(input, {
types: ['address'],
componentRestrictions: {
'country': ["de", "ch", "aut"]
}
});
var input_to_change = input;
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
console.log(place);
$(input).val(place.formatted_address);
});
}

并称之为：

for (i = 0; i < input.length; i++) {
createAutocomplete(input[i], i);
}

概念验证小提琴

代码片段：

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -33.8688,
lng: 151.2195
},
zoom: 13
});
var bounds = new google.maps.LatLngBounds();
var input = $('.my_adresse');
for (i = 0; i < input.length; i++) {
createAutocomplete(input[i], i);
}
function createAutocomplete(input, index) {
var autocomplete = new google.maps.places.Autocomplete(input, {
types: ['address'],
componentRestrictions: {
'country': ["de", "ch", "aut"]
}
});
var input_to_change = input;
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
console.log(place);
if (place != null) {
$(input).val(place.formatted_address);
if (place.geometry.location) {
var marker = new google.maps.Marker({
position: place.geometry.location,
map: map,
title: "" + index
});
bounds.extend(marker.getPosition());
map.fitBounds(bounds);
}
}
});
}
}

/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 70%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pac-card" id="pac-card">
<div>
<div id="title">
Autocomplete search
</div>
</div>
<div id="pac-container">
<input id="pac-input" class="my_adresse" type="text" placeholder="Enter a location">
</div>
<div>
<input class="my_adresse" type="text" placeholder="Enter a location">
</div>
<div>
<input class="my_adresse" type="text" placeholder="Enter a location">
</div>
<div>
<input class="my_adresse" type="text" placeholder="Enter a location">
</div>
</div>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initMap" async defer></script>