Google 具有多个标记的地图 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

这是因为您运行在循环中进行异步操作。 getJSON 需要时间去服务器并在其回调函数将运行之前收到响应，并且在请求解决时，您的循环已经运行它的过程并且 x 是 3.

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

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

应该可以。

Answer 2

Using var with asynchronous callbacks can result in unexpected behavior，如你所见。

您可以使用let在for循环中限制标签值的范围，允许您传递给[=14的匿名函数=] 关闭适当的范围，在以后调用时使用正确的标签值。

例如：

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

Google 具有多个标记的地图 javascript => 标签文本在循环中到处都是相同的

Google Maps javascript with multiple markers => Label text is everywhere the same in a loop

javascript

closures

google-maps

asynchronous

google-maps-api-3