Access Observable< google.maps.GeocoderResult []> Angular2中的对象属性 [英] Access Observable<google.maps.GeocoderResult[]> object properties in Angular2

问题描述

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

我想要做的是这样的：

  getLat （）{
 let latitude：number; 
 this.geocodingService.getLatLon（'My Address'）。forEach（
（results：google.maps.GeocoderResult []）=> {
 latitude = results [0] .geometry。 location.lat（）; 
} 
返回纬度; 
} 
  

<

解决方案

看看JSON的外观如何（从谷歌），经纬度应该有像你提到的路径：

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

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

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

  arr = [{address：'address1'}，{address： 'address2'}] 
  

然后继续研究如何获得服务中的纬度和经度HTTP调用。 x 这里是您获取地理数据所需地址的参数。

  getLatLon（x）{
 return this.http.post（...）
 .map （res => res.json（））
} 
  

然后回到你的组件，在那里你有地址阵列，你需要为每个地址获取经度和纬度。让我们循环访问数组中的每个对象并调用该服务。当得到结果时，我们然后用地址，纬度和经度来创建一个对象。你当然可以用你想存储在对象中的任何东西替换地址。所以你的组件看起来像这样：

  getLanLon（）{
 //遍历地址数组我在
上创建this.arr.forEach（x => {
 this.service.getGeo（x.address）//以地址作为参数
 .subscribe（data => {
 let lati = data.results [0] .geometry.location.lat; 
 let long = data.results [0] .geometry.location.lng; 
 //使用address，lat和lon创建新对象
 let newObj = Object.assign（{}，{address：x.address，lat：lati，lon：long}）
 / /推新创建的对象到数组
 this.newArr.push（newObj）; 
}）; 
}）
} 
  
 
 
然后你可以遍历你新创建的数组，例如： 
 
 
 <表> 
< tr> 
< th>地址< / th> 
< th>纬度< / th> 
经度< th> 
< / tr> 
< tr * ngFor =let add of newArr> 
< td> {{add.address}}< / td> 
< td> {{add.lat}}< / td> 
< td> {{add.lon}}< / td> 
< / tr> 
< / table> 
  
以下是应用程序的工作示例（限时）。请注意，有相同的经度和纬度值，因为我正在进行一个返回相同静态值的调用。但你可以看到变量地址是不同的，所以在你的真实应用程序中，你会得到每个地址的正确值！ ：）
 
 
 
  Plunker  
 
I'm using a service with a function to geocode an address to get the latitude and longitude. This function, called getLatLon, returns an Observable of google.maps.GeocoderResult[]  and I want to create a function on a component to retrieve the latitude from that object and return it but I dont know how to access that property and return it.

What I want to do is something like this:
getLat(){
        let latitude: number;       
        this.geocodingService.getLatLon('My Address').forEach(                
            (results: google.maps.GeocoderResult[]) => {                                                                          
                    latitude = results[0].geometry.location.lat();                
            }
        return latitude;
}
But I'm new to angular and I dont know how to it.
解决方案
Looking at how the JSON looks like (from google), the latitude and longitude should have the "path" like you have mentioned:
results[0].geometry.location.lat;  // latitude
results[0].geometry.location.lng; // longitude
EDIT: Since learning more about the usecase, where you are iterating over an Array and getting the latitude and longitude of each address, I would suggest you make a new Array, which makes your life easier.

So first get your array of addresses and store them somewhere. Here I just create a static array that looks like this:
arr = [ {address: 'address1'}, {address: 'address2'}]
Then moving on and looking how to get the latitudes and longitudes in the service with http-call. x here is the parameter for the address you need to fetch the geo data. 
getLatLon(x) {
    return this.http.post(...)
        .map(res => res.json())
}
Then back to your component, where you have the array of addresses, to which you need to fetch the latitude and longitude for each address. Let's loop over each object in the array and make the call to the service. When getting the result, we then make a object with the address, latitude and longitude. You can of course replace the "address" with anything you want to store in the object. So your component would look something like this:
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);
        });    
    })
  }
Then you can loop through your newly created array e.g like this:
<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>
Below is a working sample of the app (for a limited time). Please notice that there is the same latitude and longitude values, since I'm making a call that returns the same static values. But you can see the variable "address" is different, so in your real app, you would get the correct values to each address! :)

Plunker

                        
这篇关于Access Observable&lt; google.maps.GeocoderResult []&gt; Angular2中的对象属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！