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

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

本文关键字：API 编码器 获取 组地址 Google 地图      更新时间：2023-09-26

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

我想要实现的目标：

  1. 读取包含一堆商店的经度和纬度信息的对象（在生产中，这将来自WS，现在我正在使用一个名为responseObj的硬编码对象）
  2. 使用 Geocoder API 获取每个商店的完整地址（WS 仅提供纬度和纬度值）
  3. 使用来自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 很陌生，无法弄清楚是什么。

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

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

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

此致敬意。

相关文章：