获取ionic2中的当前位置

时间:2016-12-18 08:29:22

标签: angular ionic2

我是Ionic 2的新手并且接受了一些教程。

在这种情况下,我需要更改以下方法:

 applyHaversine(locations){

        let usersLocation = {


            lat: 40.713744, 
            lng: -74.009056
        };

        locations.map((location) => {

            let placeLocation = {
                lat: location.latitude,
                lng: location.longitude
            };

            location.distance = this.getDistanceBetweenPoints(
                usersLocation,
                placeLocation,
                'miles'
            ).toFixed(2);
        });

        return locations;
    }

您可以看到变量usersLocation是硬编码的:

let usersLocation = {


            lat: 40.713744, 
            lng: -74.009056
        };

我想到达真正的用户位置。

我见过Geolocation.getCurrentPosition()方法,但在这种情况下我不知道如何实现它。

谢谢

EDITED

 applyHaversine(locations){
        Geolocation.getCurrentPosition().then((resp) => {

        let  latitud = resp.coords.latitude
        let longitud = resp.coords.longitude
        }).catch((error) => {
          console.log('Error getting location', error);
        });

  console.log(this.latitud);
        let usersLocation = {

           lat:  this.latitud, 
           lng:  this.longitud 
        };

1 个答案:

答案 0 :(得分:6)

我会使用Geolocation cordova插件。您可以使用ionic-native访问它。首先,您需要安装插件:

$ ionic plugin add cordova-plugin-geolocation --save

然后您可以像这样使用它:

import { Geolocation } from 'ionic-native';

Geolocation.getCurrentPosition().then(res => {
  // res.coords.latitude
  // res.coords.longitude
}).catch((error) => {
  console.log('Error getting location', error);
});

https://ionicframework.com/docs/v2/native/geolocation/

编辑:

您的更新代码几乎是正确的。你在代码中犯了两个小错误:

  1. 您定义了2个局部变量(let latitudlet longitud),但稍后在您的代码中,您可以使用this.latitudthis.longitud来访问它们。 this始终引用您的类中定义的变量,因此这些变量将是未定义的。您必须使用局部变量或类范围变量,但这取决于您的体系结构。两者都有效。

  2. Geolocation.getCurrentPosition()返回一个承诺。这意味着.then(() => {})中的代码将在稍后执行(只要插件具有您的位置的结果)。但是其余的代码都在then之外,这意味着它将在您拥有该位置之前执行。因此,您需要将整个代码复制到then中,如下所示:

    applyHaversine(locations) {
      Geolocation.getCurrentPosition().then(res => {
        let usersLocation = {
          lat: res.coords.latitude, 
          lng: res.coords.longitude
        };
    
        locations.map((location) => {
    
          let placeLocation = {
            lat: location.latitude,
            lng: location.longitude
          };
    
          location.distance = this.getDistanceBetweenPoints(
            usersLocation,
            placeLocation,
            'miles'
          ).toFixed(2);
        });
    
      console.log(locations); // This will now have your updated distances
    
      }).catch((error) => {
        console.log('Error getting location', error);
      });
    
      return locations; // this will not work because the code above is asynchronous
    }
    
  3. 编辑2:

    一个工作的例子是:

    applyHaversine(locations) {
      return new Promise((resolve, reject) => {
        Geolocation.getCurrentPosition().then(res => {
          let usersLocation = {
            lat: res.coords.latitude, 
            lng: res.coords.longitude
          };
    
          locations.map((location) => {
    
            let placeLocation = {
              lat: location.latitude,
              lng: location.longitude
            };
    
            location.distance = this.getDistanceBetweenPoints(
              usersLocation,
              placeLocation,
              'miles'
            ).toFixed(2);
          });
    
        resolve(locations); // As soon as this is called, the "then" in will be executed in the function below.
    
        }).catch(reject);
      });
    }
    

    使用此功能的地方:

    doSomething(locations) {
      this.applyHaversine(locations).then(res => {
        // The logic after you have your new results goes here.
        console.log(res); // res will be the value that you passed into the resolve function above, in this case your updated locations array
      }
    }