使用"position.coords.latitude"尝试获取当前位置时，我未定义

Question

我是Ionic2的新手，我遵循了本教程，它 https://www.joshmorony.com/create-a-nearby-places-list-with-google-maps-in-ionic-2-part-1/完美地工作，它列出了一些地方，然后计算这些地方与硬编码的地方之间的距离，我想实现的是使用当前位置而不是代码中给出的位置，这是我到目前为止实现的屏幕截图我的应用程序的屏幕截图这是我的位置提供商：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import {Geolocation} from '@ionic-native/geolocation';
/*
  Generated class for the LocationsProvider provider.
  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class LocationsProvider {
    data: any;
    Currentlatitude: any;
    Currentlongitude: any;
   
    constructor(public http: Http, public geolocation: Geolocation) {
        console.log('Hello LocationsProvider Provider'); 
    }
    load(){     
        this.geolocation.watchPosition().subscribe((position) => {
            this.Currentlatitude = position.coords.latitude;
            this.Currentlongitude = position.coords.longitude;                 
        });
        if(this.data){
            return Promise.resolve(this.data);
        }
 
        return new Promise(resolve => {     
            this.http.get('assets/data/locations.json').map(res => res.json()).subscribe(data => {     
                this.data = this.applyHaversine(data.locations);     
                this.data.sort((locationA, locationB) => {
                    return locationA.distance - locationB.distance;
                });     
                resolve(this.data);
            });     
        });     
    }
 
    applyHaversine(locations){
    // this must change according to the device location
    /*
        let usersLocation = {
            lat: 40.713744, 
            lng: -74.009056
        };  */
        console.log("this.Currentlatitude ",this.Currentlatitude);
 
        let usersLocation = {
            latitude: this.Currentlatitude,
            longitude: this.Currentlongitude
        };
        console.log("usersLocation.latitude ",usersLocation.latitude);
        locations.map((location) => {
            let placeLocation = {
                latitude: location.latitude,
                longitude: location.longitude
            };
            location.distance = this.getDistanceBetweenPoints(usersLocation, placeLocation, 'km').toFixed(2);               
        });
        return locations;
    }
 
    getDistanceBetweenPoints(start, end, units){     
        let earthRadius = {
            miles: 3958.8,
            km: 6371
        };
 
        let R = earthRadius[units || 'km'];
         
        let lat1 = start.latitude;
        
        let lon1 = start.longitude;
      
        let lat2 = end.latitude;
         
        let lon2 = end.longitude;
        console.log("lon1 ",lat1); // here it gives me undefined
        let dLat = this.toRad((lat2 - lat1));
         
        let dLon = this.toRad((lon2 - lon1));
         
        let a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(this.toRad(lat1)) * Math.cos(this.toRad(lat2)) *
        Math.sin(dLon / 2) *
        Math.sin(dLon / 2);
        
        let c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
        let d = R * c;
         
        return d;     
    }
 
    toRad(x){            
        return x * Math.PI / 180;
    }     
}

Answer 1

我最近为我的应用程序做了一个定位服务。我使用地理位置插件从谷歌地图获取我的当前位置和距离矩阵 api，以获取到地址(坐标或正常地址(之间的距离/时间

import { Query } from '../models/query';
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { Geolocation, Geoposition, Coordinates } from '@ionic-native/geolocation';
import { NativeGeocoder, NativeGeocoderReverseResult, NativeGeocoderForwardResult } from '@ionic-native/native-geocoder';
@Injectable()
export class LocationService {
  google_API_KEY: string = 'API_KEY_FROM_GOOGLE_GOES_HERE';
  currentLocation: Geoposition;
  constructor(public http: Http, private geolocation: Geolocation,
    private geocoder: NativeGeocoder) {
    // Set your current location here, or remove this and set it manually throughout the app
    this.setCurrentLocation();
  }

  setCurrentLocation() {
    return this.geolocation.getCurrentPosition().then((resp) => {
      // Manipulate resp here if needed
      this.currentLocation = resp;
      console.log(JSON.stringify(this.currentLocation));
    }).catch((error) => {
      console.log('Error getting location', error);
    })
  }
  getBetweenCoordsDetails(fromString: string, toString: string) {
    let query = new Query('https://maps.googleapis.com/maps/api/distancematrix/json');
    query.add('key', this.google_API_KEY);
    query.add('destinations', toString);
    query.add('origins', fromString);
    query.add('units', 'imperial');
    return this.http.get(query.toQuery())
      .do(resp => {
        let x = resp;
      }, error => {
        let x = error;
      })
  }
  getBetweenCoordAndHereDetails(toString: string) {
    let x = this.currentLocation.coords;
    return this.getBetweenCoordsDetails(this.currentLocation.coords.latitude + ',' + this.currentLocation.coords.longitude, toString);
  }
  getCoordinatesFromAddress(address: string) {
    return this.geocoder.forwardGeocode(address);
  }
}

Answer 2

我想

通了，我的问题是我在 Ionic 中使用承诺和可观察量时不理解同步和异步任务，对于那些有相同问题的人，我建议本教程来解释 https://www.joshmorony.com/dealing-with-asynchronous-code-in-ionic/。至于我的程序的解决方案，我在这个问题中找到了一个解决方案 在ionic2中获取当前位置