地理编码 API 遍历数组，得到 lat/lng 并保存在新数组中

Question

我有一个数组数组，如下所示：

var data = [["street1", "zipcode1", "city1"], ["street2", "zipcode2", "city2"], ...]

我想使用每个地址的 Google 地理编码 API 获取 lat/lng，并将所有内容保存在一个新数组中，该数组应如下所示：

var newdata = [["street1", "zipcode1", "city1", lat1, lng1], ["street2", "zipcode2", "city2", lat2, lng2], ...]

下面是我尝试解决问题的方法：

var newData = [];
function writeNewData(oldArray) {
    for (i = 0; i < oldArray.length; i++) {
        var temp = [];
        var address = "";
        // note: loop 5 times because I want to add 2 new values to each array
        for (j = 0; j < 5; j++) {

            // this gives me the full address as a string
            address += oldArray[i][j] + " ";

            // just copy the old data to the new array
            if (j < 3) {
                temp.push(oldArray[i][j]);
            }

            // add the new data to the array
            if (j == 3) {  
                getLatLng(address);
                var lat = jQuery("#lat").val();
                temp.push(lat);
            } elseif (j == 4) {
                getLatLng(address);
                var lng = jQuery("#lng").val();
                temp.push(lng);
            }
        }
        newData.push(temp);
    }
};

注：我用的是Gmaps.js

function getLatLng(myAddress) {
        GMaps.geocode({
            address: myAddress,
            callback: function(results, status) {
                if (status == 'OK') {
                    var loc = [];
                    loc[0] = results[0].geometry.location.lat();
                    loc[1] = results[0].geometry.location.lng();

                    jQuery("#lat").val(loc[0]);
                    jQuery("#lng").val(loc[1]);
                }
            }
        });
}

因为我不能从 Geocode 请求中 return lat/lng 我想在 html 文件中输出它并获取值并将它们写入新数组会工作。

lat 和 lng 的输出有效，但是当我尝试获取循环内的值时，我得到一个空字符串。我还尝试在调用 getLatLng() 后添加一个超时，这给了我值，但是通过将所有新值添加到循环中的最后一个数组，它有点搞砸了新数组。

看起来像这样：

if (j == 3) {  
    getLatLng(address);
    setTimeout(function () {
        var lat = jQuery("#lat").val();
        temp.push(lat);
    }, 200);
}

任何人都知道我在这里缺少什么，是否有更简单的方法来完成这个？

Answer 1

首先，我会以不同的方式构造您的数据，使其成为一个 对象数组 而不是 数组数组 。 确保这是全局可访问的。

var data = [
    {
     "street": "",
     "zipcode": 0,
     "city": ""
    }, 
    {
     "street": "",
     "zipcode": 0,
     "city": ""
    },
 ...];

然后相应地更改您的函数：

function writeNewData() {

    for (i = 0; i < data.length; i++) {
        var address = "";
        // note: loop 5 times because I want to add 2 new values to each array

        // this gives me the full address as a string
        address += data[i].street + " " + data[i].zipcode + " " + data[i].city;

        // add the new data to the array
        getLatLng(address, i);
    }
};

function getLatLng(myAddress, i) {
    GMaps.geocode({
        address: myAddress,
        callback: function(results, status) {
            if (status == 'OK') {
                data[i].lat = results[0].geometry.location.lat();
                data[i].lng = results[0].geometry.location.lng();
            }
        }
    });
}

我将 i 传递给 geoLatLng 因为这是循环迭代的当前索引。然后，一旦 API 返回了纬度和经度，您就可以使用相同的 i 来引用回 data.

中的正确索引

等待异步调用后，您的对象现在看起来像这样：

var data = [
{
 "street": "",
 "zipcode": 0,
 "city": "",
 "lat": 0,
 "lng" : 0
}, 
{
 "street": "",
 "zipcode": 0,
 "city": "",
 "lat": 0,
 "lng" : 0
},

...];

如您所见，它更短、更简洁。如果您需要澄清任何问题，请直接询问，这里有一些关于对象和对象表示法的参考资料。

W3 Javascript Objects

W3 JSON

地理编码 API 遍历数组，得到 lat/lng 并保存在新数组中

Geocoding API loop through array, get lat/lng and save in new array

javascript

google-maps

google-geocoding-api