Question

我正在使用具有功能的服务来对地址进行地理编码以获得经度和纬度。这个名为getLatLon的函数返回一个Observable of google.maps.GeocoderResult []，我想在组件上创建一个函数来从该对象检索纬度并返回它，但我不知道如何访问该属性并将其返回。

我想做的是这样的事情：

getLat(){
        let latitude: number;       
        this.geocodingService.getLatLon('My Address').forEach(                
            (results: google.maps.GeocoderResult[]) => {                                                                          
                    latitude = results[0].geometry.location.lat();                
            }
        return latitude;
}

但我是棱角分明的新人，我不知道怎么做。

Answer 1

看看JSON的样子（来自谷歌），纬度和经度应该有＆＃34;路径＆＃34;就像你提到的那样：

results[0].geometry.location.lat;  // latitude
results[0].geometry.location.lng; // longitude

编辑：由于我们更多地了解了用例，你在迭代数组并获得每个地址的纬度和经度，我建议你制作一个新的数组，让你的生活更轻松。

首先获取您的地址数组并将其存储在某处。在这里，我只是创建一个如下所示的静态数组：

arr = [ {address: 'address1'}, {address: 'address2'}]

然后继续前进，看看如何通过http-call获取服务中的纬度和经度。 x这里是获取地理数据所需地址的参数。

getLatLon(x) {
    return this.http.post(...)
        .map(res => res.json())
}

然后返回到您拥有地址数组的组件，您需要为每个地址获取纬度和经度。让我们遍历数组中的每个对象并调用服务。获得结果后，我们再创建一个具有地址，纬度和经度的对象。您当然可以替换＆＃34;地址＆＃34;与您想要存储在对象中的任何内容。所以你的组件看起来像这样：

getLanLon() {
  // loop over the array of addresses that I created on top
  this.arr.forEach(x => {
    this.service.getGeo(x.address) // execute the call with address as parameter
      .subscribe(data => {
        let lati = data.results[0].geometry.location.lat;
        let long = data.results[0].geometry.location.lng;
        // create new object with "address", "lat" and "lon"
        let newObj = Object.assign({}, {address: x.address, lat: lati, lon: long})
          // push the newly created object to array
          this.newArr.push(newObj);
        });    
    })
  }

然后你可以遍历新创建的数组，例如：

<table>
  <tr>
    <th>Address</th>
    <th>Latitude</th>
    <th>Longitude</th>
  </tr>
  <tr *ngFor="let add of newArr">
    <td>{{add.address}}</td>
    <td>{{add.lat}}</td>
    <td>{{add.lon}}</td>
  </tr>
</table>

以下是该应用的工作示例（限时）。请注意，纬度和经度值相同，因为我正在进行一次返回相同静态值的调用。但你可以看到变量＆＃34;地址＆＃34;是不同的，所以在你的真实应用程序中，你会得到每个地址的正确值！：）

在Angular2中访问Observable <google.maps.geocoderresult []>对象属性

1 个答案:

Plunker