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