javascript - 在 for 循环中使用 map api 进行反向地理编码期间城市名称乱序

Question

我使用 for 循环对一堆坐标进行反向地理编码，并将每次迭代的结果存储在 node.js 上的数组中。但是，当我将数组发送到我的 Angular 前端或将其记录在控制台中时，城市的顺序是随机的。我正在使用 Node.js 的 @google/maps 包装器。这是我的代码:

var gm = require('@google/maps').createClient({
    key: '**********************************'
});
var x, z;
var places = [];
gm.directions({
origin: 'NYC',
destination: 'Washington DC',
}, function(err, response) {
    if (!err) {
        for(i=0; i<response.json.routes[0].legs[0].steps.length; i=i+3) {
            x = response.json.routes[0].legs[0].steps[i].end_location; //getting the coordinates of the end location for each step
            gm.reverseGeocode({latlng: [x.lat, x.lng],}, function(err, response){
                if (!err) {
                    z = response.json.results[4].address_components[1].long_name + ', ' + response.json.results[4].address_components[2].short_name;
                    places.push(z);

                }
            });

        }
    }
});
setTimeout(() => {
    console.log(places);
}, 5000)

如果您能告诉我我在这里做错了什么，我将非常感激。谢谢。

更新:

result of console.log(response.json.results[4]) result of console.log(g)

Answer 1

首先，当您使用异步代码时，不应依赖 setTimeout 来获取值。有时超时还不够，您会得到错误的数据。

您可以使用callbacks、async/await和Promises解决方案来处理异步操作并保证数据的正确性。

获取示例:

let gm = require("@google/maps").createClient({
  key: "**********************************",
  Promise: Promise
});

let x, z;
let places = [];

const directionsPromise = gm
  .directions({
    origin: "NYC",
    destination: "Washington DC"
  })
  .asPromise()
  .then(response => {
    let geocodePromises = [];

    for (i = 0; i < response.json.routes[0].legs[0].steps.length; i = i + 3) {
      x = response.json.routes[0].legs[0].steps[i].end_location;

      gecodePromises.push(
        gm.reverseGeocode({ latlng: [x.lat, x.lng] }).asPromise()
      );
    }

    return Promise.all(geocodePromises);
  })
  .then(geocodes => {
    return geocodes.map(g => {
      return (
        g.json.results[4].address_components[1].long_name +
        ", " +
        g.json.results[4].address_components[2].short_name
      );
    });
  })
  .catch(err => console.error(err));


directionsPromise.then(geocodes => {
    // if you need
    places = geocodes;

    console.log(geocodes);
})

我希望这会有所帮助。