从@ionic-native/geolocation 实现地理定位答案

【问题标题】：Implementing Geolocation from @ionic-native/geolocation从@ionic-native/geolocation 实现地理定位
【发布时间】：2018-03-31 19:39:58
【问题描述】：

我在一个 Ionic Framework 项目 V3 上，我正在尝试使用 getCurrentPosition 方法从 @ionic-native/geolocation 实现地理定位模块但没有成功。你能帮帮我吗，我的终端给我一个错误@ 987654322@

这是我的 new-place.ts 文件：

 import { Component } from '@angular/core';
 import { IonicPage } from 'ionic-angular';
 import { NavController } from "ionic-angular";
 import { Geolocation } from '@ionic-native/geolocation';

 import { PlacesService } from '../../services/places.service'

 @IonicPage()
  @Component({
 selector: 'page-new-place',
 templateUrl: 'new-place.html',
 })
export class NewPlacePage {

     // En attente au cas ou: public navCtrl: NavController, public navParams:  NavParams
      constructor(private placesService: PlacesService, private navCtrl:      NavController) {  }

  onAddPlace(value: {title: string}) {
     this.placesService.addPlace(value);
     this.navCtrl.pop();
  }

  onLocateUser() {
   Geolocation.getCurrentPosition()
  .then(
    (location) => {
    console.log('Location fetched successfully')
   }
 )

 .catch(
  (error) => console.log('An error occured', error)
   );
   }

   }

  let watch = this.geolocation.watchPosition();
  watch.subscribe((data) => {
 // data can be a set of coordinates, or an error (if an error occurred).
  // data.coords.latitude
  // data.coords.longitude
   });

这是我使用 onLocatedUser() 方法将数据推送到 <ion-col> 的 html

 <ion-header>

   <ion-navbar>
     <ion-title>Add place</ion-title>
   </ion-navbar>

  </ion-header>


 <ion-content padding>
 <form (ngSubmit)="onAddPlace(f.value)" #f="ngForm">
    <ion-item>
    <ion-label>Title</ion-label>
     <ion-input type="text" name="title" ngModel required></ion-input>
  </ion-item>
     <button ion-button block type="submit" [disabled]="!f.valid">Add a place</button>
 </form>
  <ion-grid>
   <ion-row>
     <ion-col><button ion-button block (click)="onLocatedUser()">Locate    me</button></ion-col>
   </ion-row>
    <ion-row>
     <ion-col>
       <p>You location: </p>
     </ion-col>
   </ion-row>
   </ion-grid>


  </ion-content>

【问题讨论】：

标签： angular ionic-framework

【解决方案1】：

您需要将 Geolocation 添加到构造函数中，在粘贴的示例中，我在服务上使用它，但在组件上是相同的。刚刚将它添加到您的组件构造函数中。

import {Injectable} from '@angular/core';
import 'rxjs/add/operator/map';
import {Geolocation, GeolocationOptions} from '@ionic-native/geolocation';
import {LatLng} from '@ionic-native/google-maps'


@Injectable()
export class LocationService {
    geoLocOpts: GeolocationOptions = {
        maximumAge: 0,
        enableHighAccuracy: true
    };

    constructor(private geoLocation: Geolocation) {
    }

    getLocation(): Promise<LatLng> {
        return this.geoLocation.getCurrentPosition(this.geoLocOpts)
            .then(
                geoPos => new LatLng(
                    geoPos.coords.latitude,
                    geoPos.coords.longitude
                ),
                error => console.log('geoLoc error', error))
    }
}

【讨论】：