如何转换为承诺并使用谷歌地图对地址进行地理编码答案

【问题标题】：How to convert into promise and geocode the address with google maps如何转换为承诺并使用谷歌地图对地址进行地理编码
【发布时间】：2019-01-03 02:08:56
【问题描述】：

我想把我做的这段代码转换成一个promise

因为我想在 vuetify 中显示地理编码地址

到目前为止，这是我的代码，我包括 google maps api 和 lodash 。

<!DOCTYPE html>
    <html>
    <head>
        <title>Reverse Geocoding Sample</title>
    </head>
    <body>


        <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>


    <script>

        function geocodelatLng(){
            var response = [
            {
                "address": "213 Marlon Forks\nSouth Corineland, HI 81723-1044",
                "lat": "10.30431500",
                "lng": "123.89035500"   
            },
            {
                "address": "1291 Stephania Road\nLake Dorotheastad, TN 82682-76",
                "lat": "10.30309100",
                "lng": "123.89154500"
            },
            {
                "address": "20330 Schmeler Course Apt. 210\nNorth Ari, NV 70048",
                "lat": "10.30356400",
                "lng": "123.89964100"
            }
            ] ; 




            return _.map(response,coords => { 
                // console.log(arr.index);

                var geocoder = new google.maps.Geocoder;


                var latLng = { 
                    lat : parseFloat(coords.lat),
                    lng : parseFloat(coords.lng)
                }  ; 


            // for every lat,lng . 
            // console.log(latLng);

            geocoder.geocode({'location': latLng},function (results,status){ 
                if (status === 'OK') {
                    if (results[0]) {
                        console.log(results[0].formatted_address);
                    } else {

                        window.alert('No results found');

                    }
                } else {
                    window.alert('Geocoder failed due to: ' + status);
                }

            });  





});
        }



    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6vKL6Q4u5ZhGAJlYOMkQZ13pxCUXOe9k&callback=geocodelatLng">
</script>
</body>
</html>

现在这会将所有内容记录到控制台中，但我的问题是我不知道如何在 v-list-tile-title 标记中显示它。我尝试了所有使用过的承诺，但它不起作用，也许你可以帮助我。对es6不熟悉。

  <v-list-tile>
                        <v-list-tile-content>
                            <v-list-tile-title>{{ geocodedCoordinates address here }}</v-list-tile-title>
                            <v-list-tile-sub-title>{{ address.address }}</v-list-tile-sub-title>
                        </v-list-tile-content>
                    </v-list-tile>

【问题讨论】：

您是否只想让geocodelatLng() 返回提供地理编码结果的承诺？
是的宝贝@Roamer-1888 这就是我想要的。

标签： promise vuejs2 vuetify.js vue2-google-maps

【解决方案1】：

在您希望geocodelatLng() 返回一个提供地理编码结果的承诺的基础上，您首先需要将geocoder.geocode() 从回调API 转换为承诺的东西。这样做的一般原则被广泛覆盖here。

按照这个建议，你可能会得到这样的结果：

function geocodelatLng() {
    var response = [ ....... ]; // as in the question
    var promises = response.map(function(coords) { // map response to an array of Promises.
        return new Promise(function(resolve, reject) {
            var geocoder = new google.maps.Geocoder();
            var latLng = {
                'lat': parseFloat(coords.lat),
                'lng': parseFloat(coords.lng)
            };
            geocoder.geocode({'location': latLng}, function(results, status) {
                if (status === 'OK') {
                    if (results.length) {
                        resolve(results[0]); // or `resolve(results)` to deliver all results
                    } else {
                        reject(new Error('No results found'));
                    }
                } else {
                    reject(new Error('Geocoder failed due to: ' + status));
                }
            });
        });
    });
    return Promise.all(promises);
}

如果promises 中的任何一个拒绝，您可能会遇到Promise.all() 将返回一个被拒绝的承诺的问题，这可能是您不想要的。最好忽略拒绝（错误）并提供成功的导出结果。

here 以reflect 函数的形式提供了该问题的解决方案，可以按如下方式应用：

function geocodelatLng() {
    var response = [ ....... ]; // as in the question
    function reflect(promise) {
        return promise.then(function(v) {
            return { 'status':'resolved', 'value':value };
        }, function(e) {
            return { 'status':'rejected', 'error':e };
        });
    }
    var promises = response.map(coords => { // map response to an array of Promises.
        return new Promise(function(resolve, reject) {
            var geocoder = new google.maps.Geocoder();
            var latLng = {
                'lat': parseFloat(coords.lat),
                'lng': parseFloat(coords.lng)
            };
            geocoder.geocode({'location': latLng}, function(results, status) {
                if (status === 'OK') {
                    if (results[0]) {
                        resolve(results[0]);
                    } else {
                        reject(new Error('No results found'));
                    }
                } else {
                    reject(new Error('Geocoder failed due to: ' + status));
                }
            });
        });
    });
    return Promise.all(promises.map(reflect)) // map `promises` to an array of "refelected" promises before passing to Promise.all()
    .then(function(results) {
        return results.filter(function(res) { // filter the reflected results to exclude errors
            return res.status === 'resolved';
        }).map(function(res) { // map the remaining reflected results to the value of interest
            return res.value;
        });
    });
}

geocodelatLng 的调用者现在返回一个 Promise，它将传递（通过 .then()）所有成功的地理编码结果，可以传递给 vuetify 或其他任何东西。

【讨论】：