javascript - Ionic Geolocation 适用于浏览器但不适用于 android 模拟器

Question

我目前正在从事一个 Ionic 项目，我需要在该项目中获取外部 API。所以我决定使用 OpenWeatherMap API。问题：设法获取 Ionic 网站的位置，但是一旦导入到模拟器 API 中没有显示任何内容。我目前正在使用选项卡式导航。如果可以调查 tab1.page.ts 将不胜感激

模拟器错误图像 - 由模拟器运行：

然而，The Webworks for API - Run by Ionic serve

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule} from '@angular/fire/firestore';

import { environment } from '../environments/environment';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { Insomnia } from '@ionic-native/insomnia/ngx';
import { NavigationBar } from '@ionic-native/navigation-bar/ngx';
import { LocalNotifications } from '@ionic-native/local-notifications/ngx';
import { Geolocation } from '@ionic-native/geolocation/ngx';
import { AngularFireAuthModule } from '@angular/fire/auth';
import firebase from 'firebase/app';
import {AndroidPermissions} from '@ionic-native/android-permissions/ngx'

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule,
    AngularFirestoreModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy}, 
    Insomnia, SplashScreen, StatusBar, NavigationBar, LocalNotifications, Geolocation, AndroidPermissions],
  bootstrap: [AppComponent],
})
export class AppModule {}

app.component.ts

import { Component } from '@angular/core';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AndroidPermissions } from '@ionic-native/android-permissions/ngx'

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private permission: AndroidPermissions
  ) {
    this.initializeApp();
  }
  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      this.permission.checkPermission(this.permission.PERMISSION.ACCESS_COARSE_LOCATION).then((result) =>{
          if(!result.hasPermission){
            this.permission.requestPermission(this.permission.PERMISSION.ACCESS_COARSE_LOCATION);
          }
      }, (err) => {
        this.permission.requestPermission(this.permission.PERMISSION.ACCESS_COARSE_LOCATION);
      })
    });
  }
}

tab1.page.ts

import { Component, OnInit } from '@angular/core';
import { Geolocation } from '@ionic-native/geolocation/ngx';
import { HttpClient } from '@angular/common/http';
import { Platform } from '@ionic/angular';
import { AndroidPermissions } from '@ionic-native/android-permissions/ngx'


@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page implements OnInit {

  id: string = "";
  place: string = "";
  type: string = "";
  icon: string = "";
  temperature: string = "";
  lat: any
  long: any


  constructor(public httpClient: HttpClient, public geolocation: Geolocation, public platform: Platform, private permission: AndroidPermissions) {
  }

  ngOnInit() {
    console.log("Hello there from tabs")
    this.geolocation.getCurrentPosition().then(position => {
      this.lat = position.coords.latitude
      this.long = position.coords.longitude
      console.log(this.lat)
      console.log(this.long)
    })

    this.getCurrentlocation()
    this.platform.ready().then(() => {
      this.requestpermissions();
      this.getCurrentlocation();
    });
  }

  async getCurrentlocation() {
    const position = await this.geolocation.getCurrentPosition().then((position) => {
      var latitude = position.coords.latitude;
      var longtitude = position.coords.longitude;
      this.getCurrentTemperature(latitude, longtitude);
      console.log(latitude)
      console.log(longtitude)
    })
  }

  getCurrentTemperature(latitude, longitude) {
    var url = "https://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&appid=96ed99f24b94a5d5fd1f928c39feefa1"
    this.httpClient.get(url).subscribe((data) => {
      var obj = <any>data;
      this.place = obj.name;
      this.id = obj.id;
      console.log(this.id)
      this.type = obj.weather[0].main;
      this.icon = "http://openweathermap.org/img/w/" + obj.weather[0].icon + ".png";
      this.temperature = ((parseFloat(obj.main.temp) - 273.15).toFixed(2)).toString() + " Celsius";
    })
  }

  requestpermissions() {
    this.permission.checkPermission(this.permission.PERMISSION.ACCESS_COARSE_LOCATION).then((result) => {
      if (!result.hasPermission) {
        this.permission.requestPermission(this.permission.PERMISSION.ACCESS_COARSE_LOCATION);
        this.getCurrentlocation();
      }
    }, (err) => {
      this.permission.requestPermission(this.permission.PERMISSION.ACCESS_COARSE_LOCATION);
      this.getCurrentlocation();
    })
  }
}

tab1.page.html

 <ion-header [translucent]="true">
      <ion-toolbar>
      <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
      </ion-buttons>
      <ion-title>Home</ion-title>
      </ion-toolbar>
     </ion-header>
     <ion-content padding>
      <div class="ion-padding">
        <span><img src={{icon}}><span style="position: relative; bottom: 15px;;"> {{temperature}} in
         {{place}} , {{type}}</span></span>
         {{id}}
      </div>
    </ion-content> 

标签： javascriptandroidcordovaionic-frameworkionic-native