Ионическое приложение, показывающее InvalidValueError не число - PullRequest
Новая
       6

Ионическое приложение, показывающее InvalidValueError не число

0 голосов
/ 07 ноября 2018

У меня есть настройка геолокации в моем ионном приложении, и я хочу получить текущее местоположение пользователя и отобразить в приложении, но я получаю следующую ошибку. 

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 или соответственно, я получаю координаты, но консоль регистрирует this.lat и this.long возвращает неопределенное значение.

1 Ответ

0 голосов
/ 07 ноября 2018

Вы должны создать карту, как только вы получите позицию, и вы сделали, но есть проблема с последовательностью вызова. Это асинхронное выполнение, поэтому вы должны убедиться, что initMap это как только вы получите позицию.

Вы можете перемещать initMap в секции обратного вызова функции currentPositon. 

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);
 });
 }

}
...