Question

因此，我尝试使用从Firebase提供的数据向我的地图添加标记，但出现上述错误。我检查了其他线程，但没有找到解决我问题的方法。有人建议它是来自package.json的损坏的软件包，或者是由于firebase的异步代码造成的。我在下面粘贴我的代码。请不要介意我尝试异步进行代码同步的地方，以查看是否是问题所在。

export class LocMapPage {

  @ViewChild('map') mapElement: ElementRef;

  public map: any;
  coords: any;

  constructor(public navCtrl: NavController, public afd: AngularFireDatabase) {

  }

  ionViewDidLoad(){
      this.loadMap();
  }

  async loadMap(){

    try{

      let latLng = new google.maps.LatLng(39.361798, 22.941316);

      let mapOptions = {

        center: latLng,
        zoom: 9,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

      this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);


      var MarkersRef = await firebase.database().ref("/HyperCategories/hyperCats/Locations/Mountain/Mountains/M1/");

    }catch(error){
      console.error(error);
    }

    MarkersRef.orderByChild("coords").on("child_added", function(data) {

        let lat = data.val().latitude;
        let lon = data.val().longitude;

        let myLatLng = {lat: lat, lng: lon};

        let marker = new google.maps.Marker({

          map: this.map,
          animation: google.maps.Animation.DROP,
          position: myLatLng

        });

        console.log(myLatLng);

    });

  }
}

Answer 1

在Javascript中，异步函数将返回一个promise，它将在调用函数中使用'.then'访问。

ionViewDidLoad(){
   this.loadMap().then(()=>{
      //success
   });
}

TypeError：无法读取null的属性“ map”。离子3打字稿

1 个答案: