异步Google地图请求会抛出Javascript [英] Asynchronous Google Maps request throwing off Javascript

问题描述

我正在处理其他人的代码，并试图使用Google地图API将街道地址转换为经纬度坐标：
var start_lng;
var end_lat;
var end_lng;
getLat（start）;
getLng（start）;

I'm working on someone else's code, and I am trying to use Google maps API to convert a street address into latitude and longitude coordinates: var start_lng; var end_lat; var end_lng; getLat(start); getLng(start);

  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");
   }
    });
    }

到目前为止，这么好。在下面的代码中，我用这个经纬度对它们进行了各种计算：

So far, so good. In the code below, I take that latitude and longitude and perform various calculations with them:

  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，所以我不确定要走哪条路。

The problem is that since the call that gets the latitude and longitude is asynchronous, the code below doesn't wait to get the values before it tries to use them. They show up as undefined. I tried putting the second half of the code in its own function and calling that at the end of the longitude request, but that only worked if the longitude call happened to finish first. I also tried $.ajax({ async:false}) but that didn't do anything. This is my first time dealing with AJAX, so I'm really not sure which way to go.

推荐答案

对于处理程序代码，请使用回调代替：

For the "handler" code, use a callback instead:

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);
});

如果您需要对地理编码器进行两次调用，那么您可以始终嵌套这些调用，并在完成后放置回调。例如：

If you need to make two calls to the geocoder, then you can always nest those calls, and put the callback after both are complete. Something like:

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) {

});

这篇关于异步Google地图请求会抛出Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！