Google maps 可观察访问<；google.maps.GeocoderResult[]>；Angular2中的对象属性

我正在使用一个带有函数的服务对地址进行地理编码，以获取纬度和经度。此函数名为getLatLon，返回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;
}

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

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>

---

但是我对angular不太熟悉，我不知道如何使用它。

看看JSON的样子（来自谷歌），纬度和经度应该有你提到的“路径”：

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

编辑：由于了解了更多关于用例的信息，您在一个数组上进行迭代并获得每个地址的纬度和经度，因此我建议您创建一个新数组，这会使您的生活更轻松

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

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

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

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>

然后继续，看看如何通过http调用获取服务中的纬度和经度

x

这是获取地理数据所需地址的参数

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

然后回到组件，在那里有地址数组，需要获取每个地址的纬度和经度。让我们在数组中的每个对象上循环并调用服务。当得到结果时，我们用地址、纬度和经度创建一个对象。当然，您可以将“地址”替换为要存储在对象中的任何内容。因此，您的组件将如下所示：

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

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

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>

然后，您可以通过新创建的数组进行循环，例如：

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

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

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>

地址
纬度
经度
{{add.address}}
{{add.lat}}
{{add.lon}}

下面是该应用程序的工作示例（在有限的时间内）。请注意，有相同的纬度和经度值，因为我正在进行一个返回相同静态值的调用。但是你可以看到变量“address”是不同的，所以在你的实际应用程序中，你会得到每个地址的正确值

---

看看JSON的样子（来自google），纬度和经度应该有您提到的“路径”：

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

编辑：由于了解了更多关于用例的信息，您在一个数组上进行迭代并获得每个地址的纬度和经度，因此我建议您创建一个新数组，这会使您的生活更轻松

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

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

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

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>

然后继续，看看如何通过http调用获取服务中的纬度和经度

x

这是获取地理数据所需地址的参数

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

然后回到组件，在那里有地址数组，需要获取每个地址的纬度和经度。让我们在数组中的每个对象上循环并调用服务。当得到结果时，我们用地址、纬度和经度创建一个对象。当然，您可以将“地址”替换为要存储在对象中的任何内容。因此，您的组件将如下所示：

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

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

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>

然后，您可以通过新创建的数组进行循环，例如：

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

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

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>

地址
纬度
经度
{{add.address}}
{{add.lat}}
{{add.lon}}

下面是该应用程序的工作示例（在有限的时间内）。请注意，有相同的纬度和经度值，因为我正在进行一个返回相同静态值的调用。但是你可以看到变量“address”是不同的，所以在你的实际应用程序中，你会得到每个地址的正确值

---

如果我想让方法本身返回，比如纬度。（很抱歉，由于地理编码器超过查询限制，我现在无法测试）返回哪里？在上面的代码中，您可以访问组件中的两个变量：）好的，但是您需要在哪里返回它呢？只需调用并订阅需要使用的纬度和经度。你不需要在任何地方“归还”它？？我想在我的html上使用如下方法：*ngFor=“let addres of addresses”Latitude:getLat（address）我将循环不同的地址，这就是为什么我认为我需要方法本身来返回值。没问题！我沉迷于编码，所以我很乐意提供帮助：如果我想让方法本身返回，让我们说纬度。（很抱歉，由于地理编码器超过查询限制，我现在无法测试）返回哪里？在上面的代码中，您可以访问组件中的两个变量：）好的，但是您需要在哪里返回它呢？只需调用并订阅需要使用的纬度和经度。你不需要在任何地方“归还”它？？我想在我的html上使用如下方法：*ngFor=“let addres of addresses”Latitude:getLat（address）我将循环不同的地址，这就是为什么我认为我需要方法本身来返回值。没问题！我沉迷于编码，所以我很乐意帮助：D