GeoCoding - 如何等待所有位置先解析，然后设置cookie

Question

function btnClick() { 
    var geocoder = new google.maps.Geocoder(); 
    var truckName = []; 
    var addr = []; 
    var Grid_Table = document.getElementById('GridView1'); 
    var locations2 = [{lat: -42.7545, lng: 147.735, addres: "3", geoAddress: "waa", truckName: "MX4" }, 
         {lat: -43.7545, lng: 142.735, addres: "1", geoAddress: "waa", truckName: "MX5" }, 
         {lat: -44.7545, lng: 143.735, addres: "2", geoAddress: "waa", truckName: "MX8" }]; 
      for (var row = 1; row < Grid_Table.rows.length - 1; row++) { 
      truckName.push(Grid_Table.rows[row].cells[0].textContent); 
      var addr = Grid_Table.rows[row].cells[4].textContent; 
      geocoder.geocode({ 'address': addr }, function (results, status) { 
       if (status == google.maps.GeocoderStatus.OK) { 
        var loc = results[0].geometry.location; 
        var latitude = loc.lat(); 
        var longitude = loc.lng(); 
        locations2.push({ lat: latitude, lng: longitude, addres: addr, geoAddress: results[0].formatted_address, truckName: truckName[row] }); 
       } // end if 
      }); // end geocoder 
    } // end for 
    document.cookie = "locations=" + JSON.stringify(locations2); 
} 

所以我的地图工作。但它只绘制前三个位置。我知道这是因为GeoCoding是异步的。但对于我的生活，我无法想象如何等待。我希望先完成所有GeoCoding，然后设置cookie。请帮忙。

Answer 1

如果您不需要担心的50客户端地理限速/秒 - 改变你的代码是相当小

我添加了一个名为其余变种，它被设置了预计地理编码请求数量

然后在地理编码回调，减量剩余0时，一切都过去了

// if btnClick is add to a submit button (in a form), like so 
submitButtonElement.addEventListener('click', btnClick); 
// or using jQuery something like 
$(submitButtonElement).on('click', btnClick); 
// or 
$(submitButtonElement).click(btnClick); 
// then you'll need to preventDefault to stop the form submitting 
function btnClick(e) { 
    e.preventDefault(); // only required if handling a submit button 
    var geocoder = new google.maps.Geocoder(); 
    var truckName =[]; 
    var addr = []; 
    var Grid_Table = document.getElementById('GridView1'); 
    var locations2 = [{ lat: -42.7545, lng: 147.735, addres: "3", geoAddress: "waa", truckName: "MX4" }, 
         { lat: -43.7545, lng: 142.735, addres: "1", geoAddress: "waa", truckName: "MX5" }, 
         { lat: -44.7545, lng: 143.735, addres: "2", geoAddress: "waa", truckName: "MX8" }]; 
    var remaining = Grid_Table.rows.length - 2; // how many requests are pending 
    for (var row = 1; row < Grid_Table.rows.length - 1; row++) { 
     truckName.push(Grid_Table.rows[row].cells[0].textContent); 
     var addr = Grid_Table.rows[row].cells[4].textContent; 
     geocoder.geocode({ 'address': addr }, function (results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
       var loc = results[0].geometry.location; 
       var latitude = loc.lat(); 
       var longitude = loc.lng(); 
       locations2.push({ lat: latitude, lng: longitude, addres: addr, geoAddress: results[0].formatted_address, truckName: truckName[row] }); 
      } // end if 
      remaining -= 1; 
      if (remaining === 0) { 
       // ************* ALL DONE HERE ********************** 
       document.cookie = "locations=" + JSON.stringify(locations2); 
       // all done here - any other code should be here, or in a function called from here 
      } 
     }); // end geocoder 
    } // end for 
}