[
{
"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);
}
});
});
});
},