Question

我想根据服务中的位置信息显示位置图。我正确获取位置信息。但是我在html中得到一个未定义的错误。我在哪里犯错误

Map.html

 <ion-header>

 <ion-navbar>
 <ion-title>Map</ion-title>
 </ion-navbar>

 </ion-header>


   <ion-content> 
      <sebm-google-map id="map"  [latitude]="map.lat" [longitude]="map.lng" 
       [zoom]="map.zoom">
      </sebm-google-map>
 </ion-content>

map.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';   
import {AgmCoreModule,SebmGoogleMap} from 'angular2-google-maps/core';
import {DataApi} from '../../app/shared/shared';

@IonicPage()
@Component({
selector: 'page-map',
templateUrl: 'map.html',


 })
 export class MapPage {

   map : any;
   constructor(public navCtrl: NavController, public navParams: 
   NavParams,private dataApi : DataApi) {
   }

   ionViewDidLoad() {
    console.log('ionViewDidLoad MapPage');
    let games = this.navParams.data;
    let tourneyData = this.dataApi.getCurrentTourney();
    let location = tourneyData.locations[games.locationId];

    this.map = {
    lat :  location.latitude,
    lng : location.longitude,
    zoom : 60,
    markerLabel : games.location
    };
   console.log(this.map.lat);
   console.log(this.map.lng);
   console.log(this.map.markerLabel);
 }

}

数据-api.service.ts

 import {Injectable} from '@angular/core';
 import {Http,Response} from '@angular/http';

 import 'rxjs';
 import {Observable} from 'rxjs/Observable';
 @Injectable()
 export class DataApi {

 private url = 'https://ionic2-9dc0a.firebaseio.com';   // https://ionic2-9dc0a.firebaseio.com
 currentTourney : any = {};
 private tourneyData = {};
 constructor(private http:Http){
}
  getTournaments(){
    return new Promise(resolve =>{
      this.http.get(`${this.url}/tournaments.json`) 
      .subscribe(res => resolve(res.json()))
    });
  }


 /*   getAdress(): Promise<Team> {
     return this.http.get(this.url)
    .map(rsp => rsp.json())
    .toPromise();
}
 */       

  getTournamentData(tourneyId,forceRefresh : boolean = false) : Observable<any>{

    if(!forceRefresh && this.tourneyData[tourneyId]){
      this.currentTourney = this.tourneyData[tourneyId];
      console.log("no need to make Http call");
      return Observable.of(this.currentTourney);

    }
    console.log("about to make Http call")
    return this.http.get(`${this.url}/tournaments-data/${tourneyId}.json`)
    .map((response:Response) =>{
        this.currentTourney = response.json();
        return this.currentTourney;
    });
  }


  getCurrentTourney(){
    return this.currentTourney;
  }

  refreshCurrentTourney(){
    return this.getTournamentData(this.currentTourney.tournament.id,true);
  }

}

Answer 1

您正在this.map中设置ionViewDidLoad数据，该数据在加载页面后调用。检查here。

加载模板时，可能无法设置地图。只需使用安全导航操作员或?。

 <ion-content> 
      <sebm-google-map id="map"  [latitude]="map?.lat" [longitude]="map?.lng" 
       [zoom]="map?.zoom">
      </sebm-google-map>
 </ion-content>

导航失败：无法读取undefined.ERROR的属性'lng'错误：未捕获（在promise中）：TypeError：无法读取未定义的属性'lng'

1 个答案: