從@ ionic-native/geolocation實現地理位置

Question

我在一個Ionic Framework項目V3上，我嘗試使用getCurrentPosition方法從@ ionic-native/geolocation實現Geolocation模塊，但沒有成功。請問您能否幫助我，我端給我一個錯誤file: 'file:///Users/emilio/Documents/Workspace/Ionic/my-places/src/pages/new-place/new-place.ts' severity: 'Erreur' message: 'Property 'getCurrentPosition' does not exist on type 'typeof Geolocation'.' at: '24,17' source: 'ts'

這是我的新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 
    }); 

這裏的HTML，我用推onLocatedUser（）方法將數據轉換成<ion-col>

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

Answer 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)) 
    } 
}