谷歌地图 JavaScript 与多个标记 => 标签文本在循环中无处不在都是一样的

Question

下面的代码工作正常，除了标记标签文本...该数组包含实际地址和装载订单号。标记已正确放置在地图上，但所有标注文本都显示"3"，而不是 1、2、3...如何解决这个问题？

<div id='track_trace_map'></div>
<script>
function track_trace_map() {
var truck_last_position_lat = '44.1747',
var truck_last_position_long = '1.6117',
var map = new google.maps.Map(document.getElementById('track_trace_map'), {      
center: {
lat: truck_last_position_lat,
lng: truck_last_position_long
},
zoom: 6
});
var marker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
map: map,
position: {
lat: truck_last_position_lat,
lng: truck_last_position_long
},
});
var track_trace_collections = [["DIGUE DE LA CARTONNERIE+82200+MOISSAC",1],["ZI DES PRADES+12110+VIVIEZ",2],["AVENUE GUSTAVE EIFFEL 1+41200+ROMORANTIN LANTHENAY",3]];
for (var x = 0; x < track_trace_collections.length; x++) {
$.getJSON('https://maps.googleapis.com/maps/api/geocode/json?key=KEYHIDDEN&callback&address='+track_trace_collections[x][0]+'&sensor=false', null, function (data) {
var p = data.results[0].geometry.location
var latlng = new google.maps.LatLng(p.lat, p.lng);
new google.maps.Marker({
animation: google.maps.Animation.DROP,
label: {
color: 'white',
fontWeight: 'bold',
text: String(track_trace_collections[x][1])
},
map: map,
position: latlng
});
});
}
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=KEYHIDDEN&language=en&callback=track_trace_map"></script>

Answer 1

如您所见，将var与异步回调一起使用可能会导致意外行为。

可以使用let来限制for循环中标签值的范围，从而允许传递给$.getJSON的匿名函数在适当的范围内关闭，并在以后调用时使用正确的标签值。

例如：

var track_trace_collections = [["DIGUE DE LA CARTONNERIE+82200+MOISSAC",1],["ZI DES PRADES+12110+VIVIEZ",2],["AVENUE GUSTAVE EIFFEL 1+41200+ROMORANTIN LANTHENAY",3]];
// need to use let to properly scope loop control variable
// so it goes out of scope when loop completes
for (let x = 0; x < track_trace_collections.length; x++) {
// use let to limit scoping to inside the for loop
// then anonymous function passed to $.getJSON will close over proper value
// this may not be necessary if 'x' is properly scoped using let
let trackTraceLabel = String(track_trace_collections[x][1]);
$.getJSON('https://maps.googleapis.com/maps/api/geocode/json?key=KEYHIDDEN&callback&address='+track_trace_collections[x][0]+'&sensor=false', null, function (data) {
var p = data.results[0].geometry.location
var latlng = new google.maps.LatLng(p.lat, p.lng);
new google.maps.Marker({
animation: google.maps.Animation.DROP,
label: {
color: 'white',
fontWeight: 'bold',
text: trackTraceLabel
},
map: map,
position: latlng
});
});
}

Answer 2

这是因为您在循环中运行异步操作。getJSON需要一些时间去服务器并接收响应，然后它的回调函数才会运行，当请求解析时，你的循环已经运行了它的过程，x为 3。

您需要定义一个异步函数并等待请求完成，然后再允许循环继续运行。像这样：

var track_trace_collections = [["DIGUE DE LA CARTONNERIE+82200+MOISSAC",1],["ZI DES PRADES+12110+VIVIEZ",2],["AVENUE GUSTAVE EIFFEL 1+41200+ROMORANTIN LANTHENAY",3]];
const asyncLoop = async () => {
for (var x = 0; x < track_trace_collections.length; x++) {
const data = await $.getJSON('https://maps.googleapis.com/maps/api/geocode/json?key=KEYHIDDEN&callback&address='+track_trace_collections[x][0]+'&sensor=false');
var p = data.results[0].geometry.location
var latlng = new google.maps.LatLng(p.lat, p.lng);
new google.maps.Marker({
animation: google.maps.Animation.DROP,
label: {
color: 'white',
fontWeight: 'bold',
text: String(track_trace_collections[x][1])
},
map: map,
position: latlng
});
}
}
asyncLoop();

应该工作。