使用 Google Maps API DistanceMatrixService 从 API 计算我当前位置和用户位置之间的距离

Question

我正在开发 ionic2 应用程序。我要做的是使用 Google Maps API DistanceMatrixService 和 http.get 从 API 计算我当前位置和用户位置之间的距离。

这里我使用了一个 API http://abithacoirmat.com/md/api/v1/nearby，它有一个用户列表，包含经纬度。我需要列出与我当前位置的距离的用户。

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("http://abithacoirmat.com/md/api/v1/nearby").subscribe(data => {
                this.items = JSON.parse(data['_body']).data;

            //Destination array for google map destinations
                var destArr = [];
                for (let i = 0; i < this.items.length; i++) {
                    destArr.push({
                        lat: Number(this.items[i].latitude),
                        lng: Number(this.items[i].longitude)
                    });
                }

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

                    var origin1 = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };
                    var geocoder = new google.maps.Geocoder;

                    var service = new google.maps.DistanceMatrixService;
                    service.getDistanceMatrix({
                        origins: [origin1],
                        destinations: destArr,
                        travelMode: 'DRIVING',
                        unitSystem: google.maps.UnitSystem.METRIC,
                        avoidHighways: false,
                        avoidTolls: false
                    }, function(response, status) {
                        if (status !== 'OK') {
                            alert('Error was: ' + status);
                        } else {
                            var originList = response.originAddresses;
                            for (var i = 0; i < originList.length; i++) {
                                var results = response.rows[i].elements;

                                for (var j = 0; j < results.length; j++) {
                                    console.log(results[j].distance.text + ' in ' + results[j].duration.text);
                                    //this.items[j].distance = results[j].distance.text + ' in ' + results[j].duration.text;
                                }
                            }
                        }
                    });

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

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

        });

    }

}

HTML

<ion-header>

  <ion-navbar>
    <ion-title>Nearby</ion-title>
  </ion-navbar>

</ion-header>


<ion-content class="mapbg">
<ion-list>
  <ion-item-sliding *ngFor="let item of items">
    <ion-item>
        <ion-thumbnail item-left>
        <img class="thmb" src="{{item.image}}">
        </ion-thumbnail>
        <h2>{{item.name}}</h2>
        <p>{{item.model}}</p>
        <p>{{item.distance}}</p>
    </ion-item>
  </ion-item-sliding>
</ion-list>

</ion-content>

当我尝试使用此代码时：this.items[j].distance = results[j].distance.text + ' in ' + results[j].duration.text;

我收到 运行时错误 无法读取未定义的属性“0”

Answer 1

改变

}, function(response, status) {
    if (status !== 'OK') {

到

}, (response, status)=>{
    if (status !== 'OK') {

如果您使用函数而不是粗箭头表示法，您的 this 将不会引用页面。

我建议您阅读：https://stackoverflow.com/a/20279485/5706293

回答您的第二个问题：为了显示异步数据，请更改您的 html 符号，如下所示：

{{item?.name}} {{item?.distance}}

安全导航运算符 (?) 检查数据是否为空，然后执行其余部分。