列出使用 Google 地图地理编码器 API 获得的一组地址

Question

我找不到正确列出从 Google 地图地理编码器 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 = "<strong>" + stores[key].tienda + "</strong>" + " , " + stores[key].kilometers.toFixed(2) + " km away. <br>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 很陌生，无法弄清楚是什么。

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

Answer 1

嗯，据我所知，问题是 google 地理编码器函数是异步的，为了解决这个问题，我通常会像这样构建一个递归函数：

//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，所以试试吧。

此致。

列出使用 Google 地图地理编码器 API 获得的一组地址

List a group of addresses obtained with the Google Maps Geocoder API

javascript

google-maps

web-services

google-geocoder

我想达到的目标：

到目前为止我的代码 (JS)：

我的问题