时间戳

首页 > 解决方案 > 带有多个标记的 Google Maps javascript => 标签文本在循环中到处都是相同的

javascript - 带有多个标记的 Google Maps javascript => 标签文本在循环中到处都是相同的

问题描述

下面的代码工作完美，除了标记标签文本......该数组包含实际地址和加载顺序号。标记已正确放置在地图上，但所有标签文本都显示“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>

标签： javascriptgoogle-mapsasynchronousgoogle-maps-api-3closures

解决方案

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

推荐阅读