* ionic框架*无法从由自定义Google Maps控件触发的onchange事件中调用公共方法

Question

我是离子技术（以及一般而言的Web编程）的新手，正在尝试构建一个涉及Google Maps JS API的小型应用程序。 我已经成功创建，加载了地图并在其上创建了自定义控件（下拉选择菜单），但是无法通过onchange事件执行特定功能（“ openListCuaHangModal”为名称）。 始终以“ this.openListCuaHangModal不是函数”结尾。 :(

任何人都可以帮助我对这个问题有更多的了解。 非常感谢。

这是.ts文件中的代码：

export class ChonDiemGiaoDichPage {

  @ViewChild('map') mapElement: ElementRef;
  map: any;
  public diemGiaoDich: any;

  constructor(public modalCtrl: ModalController, public navCtrl: NavController, public http: Http, public navParams: NavParams, public viewCtrl: ViewController, public geolocation: Geolocation) {
  }

  ionViewDidLoad() {
    this.diemGiaoDich = this.navParams.get('results');
    console.log(this.diemGiaoDich);

    **//this is where the map would be loaded**
    this.loadMap(this.modalCtrl, this.openListCuaHangModal);

  }  
  addInfoWindow(marker, content) {

    let infoWindow = new google.maps.InfoWindow({
      content: content
    });

    google.maps.event.addListener(marker, 'click', () => {
      infoWindow.open(this.map, marker);
    });

  }
    **//the function I'm trying to call**
  openListCuaHangModal(khuvuc) {
    let myModal = this.modalCtrl.create(ListCuaHangPage, khuvuc);
    myModal.present();
  }

  loadMap() {
    //use dynamic geolocation
    this.geolocation.getCurrentPosition().then((position) => {

      let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
      //set options for map
      let mapOptions = {
        zoomControl: true,
        mapTypeControl: false,
        scaleControl: false,
        streetViewControl: false,
        rotateControl: false,
        fullscreenControl: false,
        center: latLng,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: [
          { elementType: 'geometry', stylers: [{ color: '#242f3e' }] },
          { elementType: 'labels.text.stroke', stylers: [{ color: '#242f3e' }] },
          { elementType: 'labels.text.fill', stylers: [{ color: '#746855' }] },
          {
            featureType: 'administrative.locality',
            elementType: 'labels.text.fill',
            stylers: [{ color: '#d59563' }]
          },
          {
            featureType: 'poi',
            elementType: 'labels.text.fill',
            stylers: [{ color: '#d59563' }]
          },
          {
            featureType: 'poi.park',
            elementType: 'geometry',
            stylers: [{ color: '#263c3f' }]
          },
          {
            featureType: 'poi.park',
            elementType: 'labels.text.fill',
            stylers: [{ color: '#6b9a76' }]
          },
          {
            featureType: 'road',
            elementType: 'geometry',
            stylers: [{ color: '#38414e' }]
          },
          {
            featureType: 'road',
            elementType: 'geometry.stroke',
            stylers: [{ color: '#212a37' }]
          },
          {
            featureType: 'road',
            elementType: 'labels.text.fill',
            stylers: [{ color: '#9ca5b3' }]
          },
          {
            featureType: 'road.highway',
            elementType: 'geometry',
            stylers: [{ color: '#746855' }]
          },
          {
            featureType: 'road.highway',
            elementType: 'geometry.stroke',
            stylers: [{ color: '#1f2835' }]
          },
          {
            featureType: 'road.highway',
            elementType: 'labels.text.fill',
            stylers: [{ color: '#f3d19c' }]
          },
          {
            featureType: 'transit',
            elementType: 'geometry',
            stylers: [{ color: '#2f3948' }]
          },
          {
            featureType: 'transit.station',
            elementType: 'labels.text.fill',
            stylers: [{ color: '#d59563' }]
          },
          {
            featureType: 'water',
            elementType: 'geometry',
            stylers: [{ color: '#17263c' }]
          },
          {
            featureType: 'water',
            elementType: 'labels.text.fill',
            stylers: [{ color: '#515c6d' }]
          },
          {
            featureType: 'water',
            elementType: 'labels.text.stroke',
            stylers: [{ color: '#17263c' }]
          }
        ]
      }
      //initialize the map
      this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);

      //add custom control
      var centerControlDiv = document.createElement('div');
      // var centerControl = new this.CenterControl (centerControlDiv, this.map);
      // Set CSS for the control border.
      var controlUI = document.createElement('div');
      controlUI.style.backgroundColor = '#fff';
      controlUI.style.border = '2px solid #fff';
      controlUI.style.borderRadius = '0px';
      controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
      controlUI.style.cursor = 'pointer';
      controlUI.style.marginBottom = '22px';
      controlUI.style.textAlign = 'center';
      controlUI.style.marginTop = '15px';
      // controlUI.title = '';
      centerControlDiv.appendChild(controlUI);

      // Set CSS for the control interior.
      var controlText = document.createElement('div');
      controlText.style.color = 'rgb(25,25,25)';
      controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
      controlText.style.fontSize = '16px';
      controlText.style.lineHeight = '38px';
      controlText.style.paddingLeft = '5px';
      controlText.style.paddingRight = '5px';
      if (this.diemGiaoDich != null) {
        **//this is where it go wrong with the onchange**
        var html = '<select id="diemGiaoDichDropbox" onchange="this.openListCuaHangModal(this.value)><option value="" disabled selected hidden>Chọn Điểm Giao Dịch</option>';

        for (let diemGD of this.diemGiaoDich) {
          html += '<option value="' + diemGD.ID_khuvuc + '">' + diemGD.KhuVuc + '</option>';
        }
        controlText.innerHTML = html + '</select>';
      }
      else
        console.log("Khong thay diem GiaoDich");
      controlUI.appendChild(controlText);

      // Setup the click event listeners for the custom control
      controlUI.addEventListener('click', function () {
        //map.setCenter(chicago);
      });
      // centerControlDiv.index = 1;
      this.map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);


      //set marker for the current location
      var justMarker = new google.maps.Marker({
        animation: google.maps.Animation.DROP,
        position: latLng,
        title: "nothing to show"
      });
      justMarker.setMap(this.map);
      let content = "<h4>Vị trí hiện tại!</h4>";
      //add infoWindow for marker
      this.addInfoWindow(justMarker, content);

      //set marker for all of the offices
      var officesMarker;
      for (let diemGD of this.diemGiaoDich) {
        for (let cuahang of diemGD.CuaHang) {
          officesMarker = new google.maps.Marker({
            icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
            position: new google.maps.LatLng(cuahang.Lat, cuahang.Lng),
          });
          officesMarker.setMap(this.map);

          var ID_cuahang = cuahang.ID_cuahang;

          //set listerner on click event to office markers and go to the booking page
          officesMarker.addListener('click', function () {
            let myModal = this.modalCtrl.create(ChiTietCuaHangPage, diemGD, ID_cuahang);
            myModal.present();
          });
        }
      }

    }, (err) => {
      console.log(err);
    });
  }
}

Answer 1

（我无法发表评论，所以我会在这里给你答案）

您尝试调用的onchange函数不在class ChonDiemGiaoDichPage的上下文中。 因此无法找到它。