异步 Google Maps 请求抛出 Javascript答案

【问题标题】：Asynchronous Google Maps request throwing off Javascript异步 Google Maps 请求抛出 Javascript
【发布时间】：2013-07-15 10:11:47
【问题描述】：

我正在处理其他人的代码，我正在尝试使用 Google 地图 API 将街道地址转换为纬度和经度坐标： var start_lng; var end_lat; var end_lng; 获取纬度（开始）； 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，所以我真的不知道该走哪条路。

【问题讨论】：

一旦变量可用就进行计算

标签： javascript ajax google-maps

【解决方案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) {

});

【讨论】：

【解决方案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
}

【讨论】：