如何使用 vue2-google-maps 正确地反转地理编码

Question

这是服务器返回的响应：

使用谷歌提供的基本反向地理编码

<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);
            }

        });  

}); }

这行得通，它会登录控制台 3 地理编码地址。但是当我将它与这个包一起使用时。它不起作用这是我的代码。

  geocodedAddress(){
    let geocoder = new google.maps.Geocoder();
    let theLocations = this.locations ;

    return _.map(theLocations, addr => { 

      var geocoder = new google.maps.Geocoder();

      var locationss = { 
        lat : parseFloat(addr.lat),
        lng : parseFloat(addr.lng)
      }  ; 

    // var sampleLocation = { lat: 1.39, lng: 103.8 };

    return new Promise(function(resolve, reject) {
      geocoder.geocode({'location': locationss }, function(results, status){
        if (status === 'OK') {
          if (results[0]) {
            return results[0].formatted_address;
          } else {
            console.log(status);
            window.alert('No results found');
          }
        }
      })
    });
  });

  }

在我的模板中：

   <v-list-tile-content>
        <v-list-tile-title v-text="geocodedAddress"></v-list-tile-title>
        <v-list-tile-sub-title>{{ address.address }}</v-list-tile-sub-title>
   </v-list-tile-content>

您能帮我处理我的代码吗？因为我很难处理这个。

Answer 1

geocodedAddress 是异步的，不能在 HTML 模板中使用。

您应该创建一个数据属性（例如formatedAddresses）来存储异步请求的结果

 data() {
     return {
         locations: [],
         formatedAddresses: []
     }
 },
 created() {
     // for example, you can call it in created hooks
     this.geocodedAddress()
 },
 methods: {
    geocodedAddress() {
        var self = this;
        let geocoder = new google.maps.Geocoder();
        let theLocations = this.locations ;

        return Promise.all(_.map(theLocations, addr => { 

        var geocoder = new google.maps.Geocoder();

            var locationss = { 
                lat : parseFloat(addr.lat),
                lng : parseFloat(addr.lng)
            } ; 

            // var sampleLocation = { lat: 1.39, lng: 103.8 };

            return new Promise(function(resolve, reject) {
                geocoder.geocode({'location': locationss }, function(results, status){
                    if (status === 'OK') {
                    if (results[0]) {
                        return results[0].formatted_address;
                    } else {
                        console.log(status);
                        window.alert('No results found');
                        return null
                    }
                    }
                })
            });
        })).then(data => {
            console.log(data)
            this.formatedAddresses = data
        })
    }
}

在模板中

  <div v-for="address in formatedAddresses" :key="address">{{ address }}</div>