Question

我正在制作一个坑洼地图，我在舞台上从服务器加载坑洞数据并将其作为标记放在地图上。由于数据检索和我的应用所依赖的API（道路，地理位置等）是异步的，我的代码最终被重构为异步运行。我重构了将标记添加到地图的代码块：

/* put all potholes on the map 
 * Parameters:
 *  • callback : the function to call next
 */
function addPotholeMarkers(callback)
{
    var DEBUG = false;
    // guarantee that callback is function
    if ((callback) && (typeof(callback) !== 'function')) throw new TypeError('callback is something, but not a function. Thrown from addPotholeMarkers().');
    // add all the markers for them to the map
    async.waterfall([
        function(cb) { 
            async.eachOf(potholeAddresses, function(value, key) {
                async.eachOf(value, function (v, k) { 
                    addPotholeMarker(v, false);
                })
            })
            if (cb && typeof cb === 'function') cb(null);
        }, function(cb) {
            async.eachOf(potholeCoordinates, function(value, key) { 
                async.eachOf(value, function(v, k) { 
                    async.setImmediate(function() { addPotholeMarker(v); }); // This came from 
                })
            })
        }], function(err, results) {
            console.log('trying to center map');
            reCenterMap();
            console.log('Map recentered');
            if (callback) { 
                callback(err);
            }
        });


}

和addPotholeMarker()类似于：

/* code was initially obtained from https://developers.google.com/maps/documentation/roads/inspector */
/* Adds marker to map.
 * Parameters : 
 *  • potholeData  : a PotholeData (or PotholeDataFromCoords) object
 *  • snappedToRoad: boolean
 * Returns : 
 *  • the marker that was added to the map, or null if arguments invalid
 */
function addPotholeMarker(potholeData, snappedToRoad) {
  // make sure potholeState is either falsy or contains iconURL string
  if ((!potholeData.potholeState) || ((potholeData.potholeState) && (potholeData.potholeState.iconURL === undefined))) throw new Error('invalid potholeData');
  // let's make sure to snap this to road if it isn't already...  
  var coords = new GPSCoordinates(potholeData.lat, potholeData.lng);
  if (!snappedToRoad) 
  { 
    var potholeMarker = 'a garbage return value';
    getRoadCoordinates(coords).done(function(response) {
        var coords = response.snappedPoints[0].location;
        potholeData.lat = coords.latitude;
        potholeData.lng = coords.longitude;
        return (potholeMarker = addPotholeMarker(potholeData, true));
   /*     potholeMarker = addPotholeMarker(potholeData, true);
        return potholeMarker;*/
    });
    return; 
    //return potholeMarker;
  }
  var marker = new google.maps.Marker({
    position: coords,
    title: coords.toString(),
    map: map,
    opacity: 0.5,
    icon: ((potholeData.potholeState.iconURL !== undefined) ? potholeData.potholeState.iconURL : PURPLE_MARKER)
  });

  // make marker have effect when mouseout,mouseover
  marker.addListener('mouseover', function(mouseEvent) {
    marker.setOpacity(1.0);
  });
  marker.addListener('mouseout', function(mouseEvent) {
    marker.setOpacity(0.5);

  });

  var infoWindow = createInfoWindow(potholeData);
  // save infoWindow for later reference
  infoWindows[statesMap.get(getPotholeStateFor(potholeData.potholeState))].push(infoWindow);
  // on click of marker, show infoWindow
  marker.addListener('click', function(mouseEvent) { 
    infoWindow.open(map, marker);
  });
  // add this to potholeMarkers
  potholeMarkers[statesMap.get(getPotholeStateFor(potholeData.potholeState))].push(marker);  
  return marker;
}

This app is hosted on Google Apps Script（您需要使用Google帐户才能运行此帐户），并使用客户端async library

此代码在成功运行时，应该将地图重新定位在所有标记的位置平均值上。 reCenterMap()可以正常工作，所以我在尝试MVCE时省略了它。

当我运行代码时

在异步循环的任何勾选期间，potholeCoordinates对象（Object<Array<PotholeData> >）的成员显示为空。如何解决这个问题？

Answer 1

在向朋友展示这个问题后，考虑他的建议，并在昨晚熬夜几个小时自己动手，我做了以下改动：

与此问题无关，但

我将索引statesMap.get(getPotholeStateFor(potholeData.potholeState))更改为statesMap.get(getPotholeStateFor(potholeData))。事实证明我给了getPotholeStateFor()错误的对象，这使得它返回错误的状态。

我将addPotholeMarker(potholeData, snappedToRoad)的签名更改为addPotholeMarker(potholeData, snappedToRoad, callback); / *因为显然我忘记了，使用异步函数，必须将回调传递给最低级别的函数并在那里调用，签名为callback(err, results)或类似的东西* /
在addPotholeMarker()内部，我确保使用callback，但采用模块化方式：

if (callback) return callback(null, potholeMarker); return potholeMarker; / *我将此更改应用于if (!snappedToRoad)，但if语句仍然被破坏：它将在完成附加到数组的任务之前返回，return callback(null, potholeMarker)将导致回调被调用两次。我可能最终必须重构整个函数，特别是在}之后（其中，顺便说一句，是全局的）追加这个函数（它将是对此的回调）* / < / p>
potholeMarkers中最内层的异步循环已从：
更改
addPotholeMarkers()

到

async.eachOf(value, function(v, k) { async.setImmediate(function() { addPotholeMarker(v); }); })

注意 async.eachSeries(value, function(pothole, fn) { addPotholeMarker(pothole, true, //pothole.isSnappedToRoad(), fn); })已注释掉，因为它返回false，并且pothole.isSnappedToRoad()在主调用堆栈中没有工作，第二个参数为false。此外，它应该返回true，但它不是因为这种类型的错误发生在addPotholeMarker()之前的函数中; / *我接下来要解决这个问题！ * /

嵌套异步循环

1 个答案: