首页 > 解决方案 > 如何从 Android 手机使用 Cordova Geolocation 插件获取地理位置?

问题描述

我正在使用 Ionic 框架构建一个 Android 应用程序,我想从我的手机中使用 Cordova Geolocation ( https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-geolocation/ ) 获取地理位置。

在浏览器(离子服务)中测试实现时,一切似乎都运行良好。但是当我尝试在手机(Samsung Galaxy S6)上测试它时,不会显示位置。

不幸的是,我看不到使用 ionic cordova run android 进行调试的任何错误。

有谁知道如何解决这个问题?

跟踪页面.ts

import { Component, OnInit } from '@angular/core';
import { Geolocation } from '@ionic-native/geolocation/ngx';
import * as moment from 'moment';
import { NativeGeocoder, NativeGeocoderOptions, NativeGeocoderResult } from '@ionic-native/native-geocoder/ngx';

@Component({
  selector: 'app-tracking',
  templateUrl: './tracking.page.html',
  styleUrls: ['./tracking.page.scss'],
})
export class TrackingPage implements OnInit {
  geoLatitude: number;
  geoLongitude: number;
  geoAccuracy: number;

  watchLocationUpdates: any;
  loading: any;
  isWatching: boolean;

  // Geocoder configuration
  geoencoderOptions: NativeGeocoderOptions = {
    useLocale: true,
    maxResults: 5
  };

  constructor(
    private geolocation: Geolocation,
    private nativeGeocoder: NativeGeocoder
  ) { }

  getMoment() {
    return moment().milliseconds(0);
  }

  ngOnInit() {
    document.addEventListener('deviceready', onDeviceReady, false);
    function onDeviceReady() {
        console.log('navigator.geolocation works well');
    }
  }

      // Start location update watch
      watchLocation() {
        let options = {
          maximumAge: 3600000,
          timeout: 3000,
          enableHighAccuracy: true,
       }
        this.isWatching = true;
        this.watchLocationUpdates = this.geolocation.watchPosition();
        this.watchLocationUpdates.subscribe((resp) => {
          this.geoLatitude = resp.coords.latitude;
          this.geoLongitude = resp.coords.longitude;
          this.geoAccuracy = resp.coords.accuracy;
          timestamp: this.getMoment().format('x');
          // this.getGeoencoder(this.geoLatitude, this.geoLongitude);
        });
      }

      // Stop location update watch
      stopLocationWatch() {
        this.isWatching = false;
        console.log('this.isWatching = ', this.isWatching);
        this.watchLocationUpdates.unsubscribe();
      }
}

tracking.page.html

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>
      <div class="titleicon">
        <div class="logo-img"><img src="../assets/logo.png" width="120px" /></div>
      </div>
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding" style="text-align: center;">
  <!-- *ngIf="geoLatitude" -->
  <div> 
      Address: {{ geoAddress }}
    </h1> -->
    <h4>Latitude: {{geoLatitude}}</h4>
    <h4>Longitude: {{geoLongitude}}</h4>
    <p>Genauigkeit: {{geoAccuracy}} m</p>


  </div>´
  <ion-button (click)="watchLocation()">
    Route starten
  </ion-button>
  <br>
  <ion-button (click)="stopLocationWatch()" color="danger">
    Route beenden
  </ion-button>

</ion-content>

标签: androidangulartypescriptcordovaionic-framework

解决方案


推荐阅读