現在の場所からのユーザーの現在地までの距離

Question

私はイオン2を初めて使用しています。緯度と経度を持つAPIのユーザーリストです。私は現在の場所からGoogleマップAPIを使ってユーザーの距離を表示する必要がありますか？私はどのように私のTSファイルの中で以下のジオロケーションコードを使用できますか？

JSON：

data":[ 
     { 
     "id":"1", 
     "name":"Adil", 
     "latitude":"21.560362", 
     "longitude":"39.134023" 
     }, 
     { 
     "id":"2", 
     "name":"John", 
     "latitude":"22.560212", 
     "longitude":"39.133765" 
     }, 
     { 
     "id":"3", 
     "name":"Muhammed", 
     "latitude":"22.560212", 
     "longitude":"39.133765" 
     } 
    ] 

TSファイル：

export class AboutPage { 

    public items: any; 

    constructor(public navCtrl: NavController, public navParams: NavParams, public http: Http, public platform: Platform) { 
     this.http = http; 
     this.platform = platform; 

     this.platform.ready().then(() => { 
      this.http.get("PathToMyUsersApiFile").subscribe(data => { 
       this.items = JSON.parse(data['_body']).data; 
      }, error => { 
       console.log(error); 
      }); 

     }); 

    } 

} 

HTML：

<ion-list *ngFor="let item of items"> 
    <ion-item> 
     <h2>{{item.name}}</h2> 

<!-- distance from current location --> 
     <p>{{item.distance}}</p> 

    </ion-item> 
</ion-list> 

Geoloカチオンコード：

Geolocation.getCurrentPosition().then((position) => { 

     var currentLocation = {lat: position.coords.latitude, lng: position.coords.longitude}; 
     var usersLocation = []; // Users location 

     var geocoder = new google.maps.Geocoder; 
     var service = new google.maps.DistanceMatrixService;   
     service.getDistanceMatrix({ 
      origins: [origin1], 
      destinations: usersLocation, 
      travelMode: 'DRIVING', 
      unitSystem: google.maps.UnitSystem.METRIC, 
      avoidHighways: false, 
      avoidTolls: false 
     }, function(response, status) { 
      if (status !== 'OK') { 
       alert('Error was: ' + status); 
      } else { 
       var results = response.rows[0].elements; 
       for (var j = 0; j < results.length; j++) { 
        console.log(results[j].distance.text + ' in ' + results[j].duration.text); 
       } 
      } 
     }); 

    }, (err) => { 
     console.log(err); 
    }); 

Answer 1

constructor(private zone: NgZone) { 

} 

    this.platform.ready().then(() => { 
     this.http.get("PathToMyUsersApiFile").subscribe(data => { 
      this.items = JSON.parse(data['_body']).data; 

Geolocation.getCurrentPosition().then((position) => { 

    var currentLocation = {lat: position.coords.latitude, lng: position.coords.longitude}; 
    var usersLocation = []; // Users location 

    var geocoder = new google.maps.Geocoder; 
    var service = new google.maps.DistanceMatrixService; 
    service.getDistanceMatrix({ 
     origins: [origin1], 
     destinations: usersLocation, 
     travelMode: 'DRIVING', 
     unitSystem: google.maps.UnitSystem.METRIC, 
     avoidHighways: false, 
     avoidTolls: false 
    }, (response, status) => { 
     if (status !== 'OK') { 
      alert('Error was: ' + status); 
     } else { 
      var results = response.rows[0].elements; 
      this.zone.run(()=>{   
      for (var j = 0; j < results.length; j++) { 
       this.items[j].distance=results[j].distance.text 
      } 
      }) 
     } 
    }); 

}, (err) => { 
    console.log(err); 
}); 

     }, error => { 
      console.log(error); 
     }); 

    }); 

ポイントに注意します。

1. あなたはthisが可能であるようにコード
2. 予告矢印機能の使用に起源を設定しhaventは。（()=>{}）
3. コードをリファクタリングする多くの方法があります。 serviceにロジックを移動し、flatMap

でObservableとPromiseを組み合わせるようにそれが