Javascript - 确保地理编码器循环在嵌套循环之前完成，从而导致 markCluster 出现问题

Question

我尝试提出类似的问题，但没有得到任何帮助。 Previous Question

取得了一些进展，找到了问题所在，但仍然不明白正确的解决方案。我已经阅读了与此相关的所有问题，并了解存在类似的问题，但我仍然无法弄清楚，因此赞赏建设性的反馈:)

设置:有些用户保存了纬度/经度，有些用户仅保存了位置。在将它们绘制在 map 上之前，它需要运行地理编码器循环，为任何仅具有位置的用户(例如“美国纽约州纽约市”)创建纬度/经度。在所有用户都有纬度/经度后，我希望将他们的标记添加到标记集群中。

问题:在地理编码器循环中创建的自定义标记在 initMap() 函数完成后运行。我已经在一个循环中尝试了所有这些(请参阅上面链接中的代码)。地理编码器循环仍然在另一个循环之后完成 - 这意味着标记是在markerCluster之后创建的，因此没有聚类。所以，现在我正在考虑分解代码，并确保每个函数都已完成，然后再运行下一个函数。

我尝试了几种方法。例如这样:

$.when(getMatches( map )).then(clu​​sterUp( map , 标记));

在整个 initMap() 函数完成后，来自地理编码器的自定义标记仍然是控制台日志记录，并且现在在 initMap() 函数末尾未定义标记簇。

如何确保仅在创建所有 customMarkers 后才创建 MarkerCluster？

var lat
var lng
var userLocation
var userId
var markers = []
var geocoder = new google.maps.Geocoder()

function getMatches(map) {
    var matches = $.getJSON('get_json_matches', function(matches){
        var matches = matches
        for(i=0; i < 11; i++) {
          function (i) {

            var userId = 0
            var lat = matches[i][4];
            var lng = matches[i][5];
            var userId = matches[i][3];
            var userLocation = matches[i][2]

            //If the user only has a location, make up a lat/lng     
            if (lat === null) {
                geocoder.geocode( { 'address': userLocation }, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        var lat = (results[0].geometry.location.lat()) + (userId * .0001);

                        var lng = (results[0].geometry.location.lng()) + (userId * .0001);
                        var marker = new CustomMarker(
                            new google.maps.LatLng(lat, lng), 
                            map 
                        );
                    }  
                });    
            } else {
                    var marker = new CustomMarker(
                        new google.maps.LatLng(lat, lng), 
                        map
                    );       
            }
            markers.push(marker);   
          }).call(this, i);

        }

    return markers

})
}



function clusterUp(map, markers) {
    console.log(markers)
    var markerCluster = new MarkerClusterer(map, markers,
        {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'})
    return markerCluster
    console.log(markerCluster)
}


function initMap() {
    var newYork = {lat: 40.7127837, lng: -74.00594130000002};
    var map = new google.maps.Map(document.getElementById("user-matches-map"), {
        zoom: 12,
        center: new google.maps.LatLng(newYork),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: googleMapStyle
    });
    var markerCluster
    $.when(getMatches(map)).then(clusterUp(map, markers));
    console.log(markers)
    console.log(markerCluster) 
}

initMap();

我非常感谢一些建设性的反馈。我已经研究这个问题一天多了，我认为我错过了一个基本概念。谢谢!!

Answer 1

在全局范围内保留对 MarkerClusterer 的引用，然后在可用时将调用地理编码器产生的标记添加到地理编码器的回调函数中。

geocoder.geocode( { 'address': userLocation }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        var lat = (results[0].geometry.location.lat()) + (userId * .0001);

        var lng = (results[0].geometry.location.lng()) + (userId * .0001);
        var marker = new CustomMarker(
            new google.maps.LatLng(lat, lng), 
            map 
        );
        // add each marker created by the geocoder callback to the clusterer as it is created.
        markerCluster.addMarker(marker);

    }  
}); 

// global scope
var markerCluster = new MarkerClusterer(map, [],
    {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});

function clusterUp(map, markers) {
    console.log(markers)
    // add all the markers that don't require geocoding to the clusterer
    markerCluster.addMarkers(markers);
    console.log(markerCluster)
}