离子应用程序显示 InvalidValueError 不是数字答案

【问题标题】：Ionic app showing InvalidValueError not a number离子应用程序显示 InvalidValueError 不是数字
【发布时间】：2019-04-11 05:21:11
【问题描述】：

我在我的 ionic 应用程序中设置了地理位置，我想获取用户的当前位置并显示在应用程序上，但我收到以下错误。

InvalidValueError: setCenter: not a LatLng or LatLngLiteral: in property lat: not a number

这是我的 home.ts 代码

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController, Platform, LoadingController } from 'ionic-angular';

import { Geolocation } from '@ionic-native/geolocation';

declare var google: any;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

   public lat:number;
   public long: number;

  @ViewChild('map') mapElement: ElementRef;
  map: any;

  constructor(public navCtrl: NavController, public 
platform: Platform, public geo: Geolocation, public loadingCtrl: LoadingController) {
  platform.ready().then(() => {
      this.currentPositon();
      this.initMap();
  });
}



  initMap() {
    let loading = this.loadingCtrl.create({
    content:'Locating...'
  });

loading.present();

this.map = new google.maps.Map(this.mapElement.nativeElement, {
  zoom: 18,
  mapTypeId:google.maps.MapTypeId.ROADMAP,
  center: {lat:  this.lat, lng:  this.long},
});
loading.dismiss();
}


  currentPositon()
  {
    this.geo.getCurrentPosition().then((resp) => {
    this.lat = resp.coords.latitude;
    this.long = resp.coords.longitude
  console.log(resp);
 }).catch((error) => {
   console.log('Error getting location', error);
 });
 }

}

我做错了什么？当我 console.log resp 我得到坐标但控制台记录 this.lat 和 this.long 返回未定义。

【问题讨论】：

标签： angular typescript google-maps ionic-framework ionic3

【解决方案1】：

您应该在获得位置并完成后创建地图，但调用顺序存在问题。它是异步执行，因此您必须确保 initMap 在您收到职位后。

您可以在currentPositon函数的回调部分移动initMap。

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController, Platform, LoadingController } from 'ionic-angular';

import { Geolocation } from '@ionic-native/geolocation';

declare var google: any;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

   public lat:number;
   public long: number;

  @ViewChild('map') mapElement: ElementRef;
  map: any;

  constructor(public navCtrl: NavController, public 
platform: Platform, public geo: Geolocation, public loadingCtrl: LoadingController) {
  platform.ready().then(() => {
      this.currentPositon();
      // this.initMap(); <-- do not call here
  });
}



  initMap() {
    let loading = this.loadingCtrl.create({
    content:'Locating...'
  });

loading.present();

this.map = new google.maps.Map(this.mapElement.nativeElement, {
  zoom: 18,
  mapTypeId:google.maps.MapTypeId.ROADMAP,
  center: {lat:  this.lat, lng:  this.long},
});
loading.dismiss();
}


  currentPositon()
  {
    this.geo.getCurrentPosition().then((resp) => {
    this.lat = resp.coords.latitude;
    this.long = resp.coords.longitude;
    this.initMap(); //<-- init map once the position is received
  console.log(resp);
 }).catch((error) => {
   console.log('Error getting location', error);
 });
 }

}

【讨论】：