Question

我想在每次单击按钮时检测纬度和经度。我试图搜索许多网站和博客，但没有得到任何具体的解决方案。我还安装了cordova-plugin-geolocation并使用如下：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, Platform } from 'ionic-angular';
import {Camera, CameraOptions} from '@ionic-native/camera';
import { Geolocation, Geoposition } from '@ionic-native/geolocation';

constructor(public navCtrl: NavController, public navParams: NavParams, private camera : Camera, 
    public geolocation: Geolocation, public platform: Platform) {
  }

capturePhotos()
{
    let GPSoptions = {timeout: 10000, enableHighAccuracy: true, maximumAge: 3600};
      this.geolocation.getCurrentPosition(GPSoptions).then((position) => {

        console.log("IN");

        console.log(position.coords.latitude);
        console.log(position.coords.longitude);

      }, (error) =>
      {
        console.log('Error getting location', error);
      });
}

收到超时错误后，我将超时时间增加到50000但没有成功。上面的capturephoto功能将被调用如下：

<ion-navbar hideBackButton side="left">
      <ion-title style="margin-left: 0px;">
          <div>
              <ion-icon ios="ios-add" md="md-add" class="menuIcon" (click)="capturePhotos()"></ion-icon><span class="menuTitle">My Photos</span>
          </div>
      </ion-title>  
  </ion-navbar>

当我尝试在Android模拟器中运行它时，它会在我第一次点击添加图标时获取Lat Long，但是当我点击第二次或更多次时它停止工作并抛出错误： PositionError {}代码：3条消息：“超时已过期”

Answer 1

我通过执行以下更改来解决此问题：

1）我在手机设置中将我的位置模式设置为高精度。

2）之后我将代码从“this.geolocation”更改为 “navigator.geolocation”。

3）我的代码中有一些回调问题。当检测到lat lon时，我正在调用另一个函数，并且我正在重定向到新页面。所以解决了这个回调问题，之后我每次点击按钮都成功获得lat lon值。

Answer 2

我遇到了同样的问题。尝试进行多次更改后，我发现在设置参数{enableHighAccuracy：true}和{timeout：“大值（可能超过20秒）”}时，我能够成功获取坐标。设置{enableHighAccuracy：false}或完全不提供参数都会导致超时错误。

我发现这种行为很奇怪。我希望这会有所帮助。

Answer 3

有这个答案phonegap geolocation allways fail on timeout，

你的代码似乎没问题，但是，开始尝试获取没有选项的位置（默认选项）

Answer 4

这不是一个理想的解决方案（使用watchPosition），但它适用于iOS，它应该适合你。

home.ts

import {Component} from '@angular/core';
import {Platform, NavController} from 'ionic-angular';
import {Geolocation, Geoposition} from '@ionic-native/geolocation';

import 'rxjs/add/operator/filter';
import {last} from "rxjs/operator/last";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  latest: Geoposition;
  displayed: Geoposition;
  timestamp: number = 0;

  constructor(private platform: Platform, public navCtrl: NavController, private geolocation: Geolocation) {
    this.latest = {
      coords: {
        altitude: 0,
        heading: 0,
        latitude: 0,
        longitude: 0,
        accuracy: 0,
        altitudeAccuracy: 0,
        speed: 0
      },
      timestamp: 0
    };
    this.displayed = this.latest;
    this.platform.ready()
      .then(() => {

        const subscription = this.geolocation.watchPosition({
          enableHighAccuracy: true,
          maximumAge: 8000,

        })
          .filter((p) => p.coords !== undefined) //Filter Out Errors
          .subscribe(position => {
            if (position.coords !== undefined) {
              this.latest = position;
            }

          });

      });

  }

  refreshLocation() {
    this.displayed = this.latest
  }

}

home.html的

<ion-header>
  <ion-navbar>
    <ion-title>
      Movement information
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button (click)="refreshLocation()" full>Update</button>
  <ion-list>
    <ion-item no-padding no-margin>
      time: {{timestamp}}
    </ion-item>
    <ion-item no-padding no-margin>
      lat: {{displayed.coords.latitude}}
    </ion-item>
    <ion-item no-padding no-margin>
      long: {{displayed.coords.longitude}}
    </ion-item>
    <ion-item no-padding no-margin>
      altitude: {{displayed.coords.altitude}}
    </ion-item>
    <ion-item no-padding no-margin>
      heading: {{displayed.coords.heading}}
    </ion-item>
    <ion-item no-padding no-margin>
      speed: {{displayed.coords.speed}}
    </ion-item>
  </ion-list>
</ion-content>

离子2 - 地理位置超时错误

4 个答案: