列出使用 Google Maps Geocoder API 获得的一组地址答案

【问题标题】：List a group of addresses obtained with the Google Maps Geocoder API列出使用 Google Maps Geocoder API 获得的一组地址
【发布时间】：2016-02-26 23:43:29
【问题描述】：

我找不到正确列出从 Google Maps Geocoder API 获得的一组地址的方法。

我想要达到的目标：

为一堆商店读取一个包含经度和纬度信息的对象（在生产中，这将来自 WS，现在我正在使用一个名为 responseObj 的硬编码对象）
使用 Geocoder API 获取每个商店的完整地址（WS 仅提供纬度和经度值）
使用来自responseObj 对象的信息（商店名称、到当前位置的距离；两者都已由 WS 提供）以及地理编码器提供的完整地址显示商店列表

到目前为止我的代码（JS）：



    /*
    I'm simulating the response I would obtain from a WS inside this object:
    */
    var responseObj = [{
        "storeName": "Store Number One",
        "lat": "XX.XXXX",
        "lon": "-XX.XXXX",
        "kilometers": 0.10
    }, {
        "storeName": "Two: The Store",
        "lat": "XX.XXXX",
        "lon": "-XX.XXXX",
        "kilometers": 0.50
    }, {
        "storeName": "Three Market",
        "lat": "XX.XXXX",
        "lon": "-XX.XXXX",
        "kilometers": 0.60
    }, {
        "storeName": "Four's",
        "lat": "XX.XXXX",
        "lon": "-XX.XXXX",
        "kilometers": 0.85
    }]

    /*
    /* Getting a list of stores and displaying addresses
    */
    function listStores(stores) {

        for (var key in stores) {
            if (stores.hasOwnProperty(key)) {
                var storeLat = stores[key].lat;
                var storeLon = stores[key].lon;

                var geocoder = new google.maps.Geocoder();
                var storeLatLong = new google.maps.LatLng(storeLat, storeLon);
                var formattedAddress;

                geocoder.geocode({
                    "latLng": storeLatLong
                }, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        if (results) {
                            formattedAddress = results[0].formatted_address;
                            // For debugging:
                            //console.log(results[0].formatted_address);
                        }
                    } else {
                        formattedAddress = "Address unavailable.";
                        // For debugging:
                        // console.log("Address unavailable.");
                    }
                });

                var dataListItem = document.createElement("li");
                dataListItem.innerHTML = "" + stores[key].tienda + "" + " , " + stores[key].kilometers.toFixed(2) + " km away. 
Address: " + formattedAddress;

                document.getElementById('stores_list').appendChild(dataListItem);
            };
        }
    }

    listStores(responseObj);

考虑最基本的标记结构：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Stores List</title>
</head>

<body>    
    <h1>Stores:</h1>
    <ul id="stores_list">
    </ul>
</body>

</html>

我的问题

我无法将地理编码器返回的地址正确附加到包含其余商店信息的列表项中。我很确定我错过了地理编码器的异步行为，但我对 JS 很陌生，不知道是什么。

请帮助我了解如何正确显示上述所有内容。

【问题讨论】：

地理编码器是异步的，您需要使用回调函数中返回的数据在哪里/何时可用。
我无法弄清楚它以前在哪里/何时可用，但在接受的答案中，您的观点被进一步扩展@geocodezip

标签： javascript web-services google-maps google-geocoder

【解决方案1】：

好吧，就我所见，问题是谷歌地理编码器函数是异步的，为了解决这个问题，我通常像这样构建一个递归函数：

//I'm simulating the response I would obtain from a WS inside this object:
    var responseObj = [{
        "storeName": "Store Number One",
        "lat": "XX.XXXX",
        "lon": "-XX.XXXX",
        "kilometers": 0.10
    }, {
        "storeName": "Two: The Store",
        "lat": "XX.XXXX",
        "lon": "-XX.XXXX",
        "kilometers": 0.50
    }, {
        "storeName": "Three Market",
        "lat": "XX.XXXX",
        "lon": "-XX.XXXX",
        "kilometers": 0.60
    }, {
        "storeName": "Four's",
        "lat": "XX.XXXX",
        "lon": "-XX.XXXX",
        "kilometers": 0.85
    }]

    /*
/* Getting a list of stores and displaying addresses
*/
    function listStores(stores, index) {

        // Test for not going on infinite loop
        if (index == stores.length) {
            return;
        }

        var storeLat = stores[index].lat;
        var storeLon = stores[index].lon;
        var geocoder = new google.maps.Geocoder();
        var storeLatLong = new google.maps.LatLng(storeLat, storeLon);
        var formattedAddress;

        geocoder.geocode({
            "latLng": storeLatLong
        }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                if (results) {
                    formattedAddress = results[0].formatted_address;
                    // For debugging:
                    //console.log(results[0].formatted_address);

                    var dataListItem = document.createElement("li");
                    dataListItem.innerHTML = "" + stores[index].tienda + "" + " , " + stores[index].kilometers.toFixed(2) + " km away. Address: " + formattedAddress;
                    document.getElementById('stores_list').appendChild(dataListItem);

                    // after a success response call it gain with new intex value
                    listStores(stores, (index + 1));
                }


            } else {
                formattedAddress = "Address unavailable.";
                // For debugging:
                // console.log("Address unavailable.");
            }
        });

    }


    listStores(responseObj);

我没有测试id，你试试吧。

最好的问候。

【讨论】：

你的建议很完美@LeandroP，我只是假设第一次调用函数时添加'0'作为第二个参数。