異步Google Maps請求拋出Javascript

Question

我正在處理其他人的代碼，並且嘗試使用Google Maps API將街道地址轉換為緯度和經度坐標：var start_lng; var end_lat; var end_lng; getLat（start）; getLng（開始）;

  function getLat(loc) {
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({'address': loc}, function postcodesearch(results, status) 
    {   
      if (status == google.maps.GeocoderStatus.OK) 
    {
      var lat = results[0].geometry.location.lat();
      alert(lat);
      return lat;

      //alert(start_lng);
    }
  else {
    alert("Error");
  }
  });
 }
function getLng(loc) {
var geocoder_lng = new google.maps.Geocoder();
  geocoder_lng.geocode({'address': loc}, function postcodesearch(results, status) 
{   
  if (status == google.maps.GeocoderStatus.OK) 
{
  var lng = results[0].geometry.location.lng();
  alert(lng);
  return lng;

}
  else {
 alert("Error");
   }
    });
    }

到現在為止還挺好。 在下面的代碼中，我采用該經度和緯度並對它們執行各種計算：

  alert("DO REST");
  var start_p = new google.maps.LatLng(start_lat, start_lng);
  alert(start_p);
  var end_p = new google.maps.LatLng(end_lat, end_lng);

問題在於，由於獲取緯度和經度的調用是異步的，因此下面的代碼在嘗試使用它們之前不會等待獲取這些值。 它們顯示為未定義。 我嘗試將代碼的后半部分放在自己的函數中，並在經度請求的末尾調用它，但這僅在經度調用恰好首先完成時才有效。 我也嘗試了$ .ajax（{async：false}），但是沒有做任何事情。 這是我第一次處理AJAX，所以我真的不確定該走哪條路。

Answer 1

對於“處理程序”代碼，請改用回調：

function getLatLng(loc, callback) {
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({'address': loc}, function postcodesearch(results, status) 
    {   
        if (status == google.maps.GeocoderStatus.OK) 
        {
            var lat = results[0].geometry.location.lat();
            var lng = results[0].geometry.location.lng();
            callback(lat, lng);
        }
    }
}

getLatLng(function(lat, lng) {
    alert("DO REST");
    var start_p = new google.maps.LatLng(lat, lng);
});

如果您需要對地址解析器進行兩次調用，那么您始終可以嵌套這些調用，並在兩者均完成后放置回調。 就像是：

function getLatLng(locStart, locEnd, callback) {
    geocoder.geocode({ }, function(results1) {

        geocoder.geocode({ }, function(results2) {

            callback(results1.lat, results1.lng, results2.lat, results2.lng);
        });
    });
}

getLatLng(loc1, loc2, function(lat1, lng1, lat2, lng2) {

});

Answer 2

使用全局標志變量

例如：

var flag_lat = var flag_lnt = 0;

然后添加您的postcodesearch功能flag_lat=1; 並且flag_lng=1; 分別

並在每個postcodesearch函數末尾進行檢查

if (flag_lat && flag_lng) 
{ 
  do_the_things_function(); 
  flag_lat = flag_lng = 0; //reset the flags
}