Angular 获取ionic2中的当前位置

我是新来的离子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（）方法，但我不知道在这种情况下如何实现它

多谢各位

编辑

 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 
        };

---

我会使用GeolocationCordova插件。您可以使用

爱奥尼亚原生版

访问它。首先，您需要安装插件：

$ 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);
});

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
}

编辑：

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

您定义了两个局部变量（

let latitud

和

let longitud

），但随后在代码中使用

this.latitud

和

this.longitud

访问它们

此

始终引用在类中定义的变量，因此这些变量将是未定义的。您必须使用局部变量或类范围的变量，但这取决于您的体系结构。两者都有效

Geolocation.getCurrentPosition（）

返回一个承诺。这意味着

.then（（）=>{}）

中的代码将在以后执行（只要插件在您的位置上有结果）。但是您的其余代码在

then

之外，这意味着它将在您获得位置之前执行。因此，您需要将整个代码复制到

中，然后如下所示：

import { Geolocation } from 'ionic-native';

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

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
}

编辑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
  }
}

---

我会使用GeolocationCordova插件。您可以使用

爱奥尼亚原生版

访问它。首先，您需要安装插件：

$ 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);
});

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
}

编辑：

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

您定义了两个局部变量（

let latitud

和

let longitud

），但随后在代码中使用

this.latitud

和

this.longitud

访问它们

此

始终引用在类中定义的变量，因此这些变量将是未定义的。您必须使用局部变量或类范围的变量，但这取决于您的体系结构。两者都有效

Geolocation.getCurrentPosition（）

返回一个承诺。这意味着

.then（（）=>{}）

中的代码将在以后执行（只要插件在您的位置上有结果）。但是您的其余代码在

then

之外，这意味着它将在您获得位置之前执行。因此，您需要将整个代码复制到

中，然后如下所示：

import { Geolocation } from 'ionic-native';

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

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
}

编辑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
  }
}

---

谢谢Andreas，但是如何从let usersLocation{}变量定义中获取坐标呢？我不确定是否理解您的意思。您可以通过写入

usersLocation.lat

和

usersLocation.lng

来访问坐标，我的意思是，我应该在哪里包括您的提案，以及如何从let usersLocation{}内部访问坐标：res.coords.lation和res.coords.longitude。。。？我已经在我的问题中加入了一个经过编辑的提案，但不起作用现在无法工作（它将是您传递给函数的同一个数组）。完成计算后，您希望如何处理这些数据？有两种方法可以解决这个问题：1。将其保存在类属性2中。返回另一个承诺您可能应该阅读Javascript中的承诺和异步代码来理解这些问题。现在，我得到了一个显示在google地图上的位置列表。谢谢Andreas，但是如何从let usersLocation{}中获取坐标变量定义？我不确定我是否理解你的意思。您可以通过写入

usersLocation.lat

和

usersLocation.lng

来访问坐标，我的意思是，我应该在哪里包括您的提案，以及如何从let usersLocation{}内部访问坐标：res.coords.lation和res.coords.longitude。。。？我已经在我的问题中加入了一个经过编辑的提案，但不起作用现在无法工作（它将是您传递给函数的同一个数组）。完成计算后，您希望如何处理这些数据？有两种方法可以解决这个问题：1。将其保存在类属性2中。返回另一个承诺您可能应该阅读Javascript中的承诺和异步代码来理解这些问题。