Question

当我点击谷歌地图中的标记时，我需要显示一个模态，但我的代码会产生此错误：

Uncaught TypeError: Cannot read property 'create' of undefined

import { Component, ViewChild, ElementRef } from '@angular/core';
import { MenuController, ModalController, ViewController, NavParams } from 'ionic-angular';

// import Mocks
import * as QuestionMapping from '../../models/question.mapping';

declare var google: any;

@Component({
  selector: 'page-game',
  templateUrl: 'game.html'
})
export class GamePage {
  //déclare la variable et son type
  private questions: QuestionMapping.QuestionMap[];

  map:any;


  @ViewChild('map') mapRef: ElementRef;

  constructor(public menuCtrl: MenuController, public modalCtrl: ModalController){
      
      //recuperer les données
      this.questions = QuestionMapping.QuestionMapMock;
  }
  
  ionViewDidLoad(){
    this.showMap();
  }

  ionViewDidEnter(){
    
  }
  
  showMap(){
    //Localisation Lattitude Longitude
    const location = new google.maps.LatLng(51.507351,-0.127758)
    //const location2 = new google.maps.LatLng(51.500000,-0.127758)

    //Map option
    const options = {
      center: location,
      zoom: 15,
      streetViewControl: false,
      fullscreenControl: false,
      mapTypeControl: false,
      zoomControl: false
    }

    const map = new google.maps.Map(this.mapRef.nativeElement, options)
        
    for(var question of this.questions){
      console.log(this.getLatitudeQuestion(question));
      console.log(this.getLongitudeQuestion(question));
      
      
      var myLatLng = { 
        lat: this.getLatitudeQuestion(question), 
        lng: this.getLongitudeQuestion(question)
      };
      
      const position = new google.maps.LatLng(myLatLng.lat,myLatLng.lng);
      
      var marker = new google.maps.Marker({
        position: position,
        map: map,
        title: 'Hi!',
        animation: google.maps.Animation.DROP
      });

      marker.addListener('click', function() {
        console.log("test");
        let questionModal = this.modalCtrl.create('QuestionPage');

        questionModal.present();
      });

    }

  }


  addMarker(position, map){ 
    return new google.maps.Marker({
      position,
      map
    })
  }

  getLatitudeQuestion(question: QuestionMapping.QuestionMap){
    return question.lat;
  }
  getLongitudeQuestion(question: QuestionMapping.QuestionMap){
    return question.lng;
  }
  getIdQuestion(question: QuestionMapping.QuestionMap){
    return question.id;
  }
}

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

/**
 * Generated class for the QuestionPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-question',
  templateUrl: 'question.html',
})
export class QuestionPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad QuestionPage');
  }

}

Answer 1

您收到错误是因为此在marker.addListener内未定义。所以你需要替换你的代码

  marker.addListener('click', function() {
    console.log("test");
    let questionModal = this.modalCtrl.create('QuestionPage');

    questionModal.present();
  });

使用以下代码：

let that = this; // define 'that' variable and assign 'this'
marker.addListener('click', function() {
        console.log("test");
        let questionModal = that.modalCtrl.create('QuestionPage');

        questionModal.present();
      });

Answer 2

这可能是因为关键字＆＃39; this＆＃39;没有保留在你的函数中，所以你可以尝试这样的东西来保存你的函数，如下所示：

let self = this
marker.addListener('click', function(){
  console.log("test");
  let quesModal=self.modalCtrl.create('QuestionPage');
  .... 
});

单击谷歌地图中的标记后如何显示模态？

2 个答案: