Question

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

取得了一些进展，找到问题所在，但仍然没有理解正确的解决方案。我已经阅读了关于这个问题的每一个问题，并且理解有类似的问题，但我仍然无法弄明白，所以我很感激建设性的反馈：）

设置：有些用户保存了lat / lng，有些用户只有一个位置。在将它们绘制在地图上之前，它需要通过地理编码器循环来为任何具有位置的用户创建一个lat / lng（例如＆＃34;纽约，纽约，美国和＃34;）。在所有用户都有lat / lng之后，我希望将他们的标记添加到标记集群中。

问题：在initMap（）函数完成后，在地理编码器循环中创建的customMarkers正在运行。我已经在一个循环中尝试了所有这些（参见上面链接中的代码）。在另一个循环之后，地理编码器循环仍在完成 - 这意味着标记是在markerCluster之后创建的，因此没有聚类。所以，现在我正在考虑拆分代码，并确保在运行下一个代码之前完成每个功能。

我尝试了几种方法。例如：

$.when(getMatches(map)).then(clusterUp(map, markers));

在整个initMap（）函数完成后，来自地理编码器的customMarkers仍然是控制台记录，现在在initMap（）函数的末尾未定义了markercluster。

如何确保仅在创建所有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)
}

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

1 个答案: