首页 文章

Ionic app显示InvalidValueError而不是数字

提问于
浏览
0

我在我的离子应用程序中有地理定位设置,我想获得用户的当前位置并在应用程序上显示但我得到以下错误 .

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返回undefined .

1 回答

  • 1

    一旦你获得了这个位置就应该创建 Map 而你已经完成了但是调用顺序存在问题 . 它是一个异步执行,所以你必须确保 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);
     });
     }
    
    }
    

相关问题