javascript函数没有正确返回一个对象

Question

我没有想法。我有一个JavaScript函数返回一个对象，但控制台不断抱怨Uncaught TypeError：无法正确读取'lat'未定义....从控制台转储我可以看到，一切都正确传递到函数，我可以看到该功能正常工作。问题在于回报。我不确定最新的问题，这似乎相当简单。注意，我正在使用google maps/geocode api。

function locate(val) { 
     console.log(val); 
     geocoder = new google.maps.Geocoder; 
     geocoder.geocode({'address': val}, function(results, status) { 
      if (status == 'OK') { 
       var lat = results[0].geometry.location.lat(); 
       var lng = results[0].geometry.location.lng(); 
       var pos = { 
        lat: lat, 
        lng: lng 
       }; 
       console.log('lat: ' + pos.lat); 
       console.log('lng: ' + pos.lng); 
       return pos; 
      } 
      else { 
       alert('Geocode was not successful for the following reason: ' + status); 
       return null; 
      } 
     }); 
    } 

    for (i = 0; i < address.length; i++) { 
     var coord = locate(address[i].toString()); 
     var lat = coord.lat; 
     var lng = coord.lng 
     console.log(lat); 
    } 

Answer 1

如果错误在var lat = coord.lat在for循环发生我想这是因为你想的geocode回调之前访问coord已执行。

Answer 2

这个问题是由异步造成的。

For a more general explanation of async behavior with different examples, please see Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference

你可以这样做来解决它。

function locate(val, callback) { 
    console.log(val); 
    geocoder = new google.maps.Geocoder; 
    geocoder.geocode({'address': val}, function(results, status) { 
     if (status == 'OK') { 
      var lat = results[0].geometry.location.lat(); 
      var lng = results[0].geometry.location.lng(); 
      var pos = { 
       lat: lat, 
       lng: lng 
      }; 
      console.log('lat: ' + pos.lat); 
      console.log('lng: ' + pos.lng); 
      return pos; 
     } 
     else { 
      alert('Geocode was not successful for the following reason: ' + status); 
      return null; 
     } 
    }); 
} 

function mycallcack(coord) 
{ 
     var lat = coord.lat; 
     var lng = coord.lng 
     console.log(lat); 
} 

for (i = 0; i < address.length; i++) { 
    locate(address[i].toString(), mycallback(coord)); 
} 

Answer 3

我今天碰到类似的问题，问题是地理编码方法不能同步运行，所以有一个回调函数。回调中的return语句不会返回给您的locate方法的调用者。

解决方法是使用承诺。如果你正在使用jQuery，你做......

function locate(val) { 
    console.log(val); 
    var dfd = $.Deferred(); 
    geocoder = new google.maps.Geocoder; 
    geocoder.geocode({'address': val}, function(results, status) { 
     if (status === 'OK') { 
      var lat = results[0].geometry.location.lat(); 
      var lng = results[0].geometry.location.lng(); 
      var pos = { 
       lat: lat, 
       lng: lng 
      }; 
      console.log('lat: ' + pos.lat); 
      console.log('lng: ' + pos.lng); 
      dfd.resolve(pos); 
     } 
     else { 
      dfd.reject('Geocode was not successful for the following reason: ' + status); 
     } 
    }); 
    return dfd.promise(); 
} 

for (i = 0; i < address.length; i++) { 
    locate(address[i].toString()) 
     .then(function(coord) {; 
     var lat = coord.lat; 
     var lng = coord.lng; 
     console.log(lat); 
     }) 
     .catch(function(reason) { 
     console.log(reason); 
     }); 
} 

或者在ES6：

function locate(val) { 
    return new Promise((resolve,reject) => { 
    geocoder = new google.maps.Geocoder; 
    geocoder.geocode({'address': val}, (results, status) => { 
     if (status === 'OK') { 
      var lat = results[0].geometry.location.lat(); 
      var lng = results[0].geometry.location.lng(); 
      var pos = { 
       lat: lat, 
       lng: lng 
      }; 
      resolve(pos); 
     } 
     else { 
      reject('Geocode was not successful for the following reason: ' + status); 
     } 
    }); 
    } 
} 

for (i = 0; i < address.length; i++) { 
    locate(address[i].toString()) 
     .then(coord => {; 
     var lat = coord.lat; 
     var lng = coord.lng; 
     console.log(lat); 
     }) 
     .catch(reason => { 
     console.log(reason); 
     }); 
}