如何在vue

时间:2018-06-09 09:47:14

标签: vuejs2 lodash vuetify.js

[
{
"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"
}
]

我有这些数据。并从此模板

<v-list two-line v-for="(address,index) in addresses" :key="index">
 <delivery-address :address="address" :index="index"></delivery-address>
 </v-list>

这是我的Address.vue文件

<template>
  <div>
    <v-list-tile :key="id">
      <v-list-tile-content>
        <v-list-tile-title>{{ geocodedAddress }}</v-list-tile-title>
        <v-list-tile-sub-title>{{ address.address }}</v-list-tile-sub-title>
      </v-list-tile-content>
    </v-list-tile>
    <v-divider inset></v-divider>
  </div>
</template>
那个{{geocodedAddress}}上的

是一个计算属性,它返回地理编码的地址,这意味着如果我有那些​​lat,它会显示反向地理编码的地址

https://developers.google.com/maps/documentation/javascript/examples/geocoding-reverse

geocodedAddress(){

    return _.map(this.address, function (addr){
      let geocoder = new google.maps.Geocoder() ;

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



     return new Promise(function (resolve, reject) {
      geocoder.geocode({'address': latLng}, function (results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
          latLong.latitude = results[0].geometry.location.lat();
          latLong.longitude = results[0].geometry.location.lng();
        } else {
          reject(status);
        }
      });
    });



    });

  },

0 个答案:

没有答案