Question

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

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

我想使用每个地址的Googles Geocoding 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请求中返回lat / lng，我认为将其输出到html文件中，只需获取值并将它们写入新数组即可。

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

看起来像这样：

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返回了lat和lng，您就可以使用相同的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并保存在新数组中

1 个答案: