this.map.getCenter() 无法读取属性

Question

我为谷歌地图创建了一个提供者参考：https://www.joshmorony.com/location-select-page-with-google-maps-and-ionic/

在 google.maps.event.addListener 内部尝试调用 alert(this.map.getCenter());

我遇到以下错误：

main.js:564
TypeError：无法读取未定义的属性“getCenter” main.js:569
在 Qg。 (file:///android_asset/www/build/main.js:569:36)
触发时 (http://maps.google.com/maps/api/js?key=MY_API_KEY&callback=mapInit&libraries=places:123:449)
在http://maps.google.com/maps-api-v3/api/js/31/7/common.js:8:135
在 _.Vo.H (http://maps.google.com/maps-api-v3/api/js/31/7/common.js:200:2336)
在 t.invokeTask (file:///android_asset/www/build/polyfills.js:3:15660)

版本：
“@angular/common”：“5.0.0”，
“@ionic-native/core”：“4.3.2”

import { Injectable } from '@angular/core';
import { Platform } from 'ionic-angular';
import { Connectivity } from './wifi-connectivity-service';
import { Geolocation } from '@ionic-native/geolocation';

declare var window: any;

@Injectable()
export class GoogleMapsProvider {

  mapElement: any;
  pleaseConnect: any;
  map: any;
  mapInitialised: boolean = false;
  mapLoaded: any;
  mapLoadedObserver: any;
  currentMarker: any;
  apiKey: string = "MY_API_KEY";
  marker: any = null;

  constructor(
    public connectivityService: Connectivity,
    public geolocation: Geolocation
  ) {
  }

  init(mapElement: any, pleaseConnect: any): Promise<any> {

    this.mapElement = mapElement;
    this.pleaseConnect = pleaseConnect;
    return this.loadGoogleMaps();

  }

  loadGoogleMaps(): Promise<any> {
    return new Promise((resolve) => {
      if (typeof google == "undefined" || typeof google.maps == "undefined") {

        this.disableMap();
        if (this.connectivityService.isOnline()) {

          window['mapInit'] = () => {
            this.initMap().then(() => {
              resolve(true);
            });
            this.enableMap();
          }

          let script = document.createElement("script");
          script.id = "googleMaps";

          if (this.apiKey) {
            script.src = 'http://maps.google.com/maps/api/js?key=' + this.apiKey + '&callback=mapInit&libraries=places';
          } else {
            script.src = 'http://maps.google.com/maps/api/js?callback=mapInit';
          }

          document.body.appendChild(script);

        }
      } else {

        if (this.connectivityService.isOnline()) {
          this.initMap();
          this.enableMap();
        }
        else {
          this.disableMap();
        }
        resolve(true);
      }

      this.addConnectivityListeners();

    });

  }

  initMap(): Promise<any> {

    this.mapInitialised = true;

    return new Promise((resolve) => {

      this.geolocation.getCurrentPosition().then((position) => {

        let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

        let mapOptions = {
          center: latLng,
          zoom: 15,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          disableDefaultUI: true
        }

        this.map = new google.maps.Map(this.mapElement, mapOptions);
        //HERE I AM GETTING DATA:
        console.log("getCenter(): " + this.map.getCenter());
        google.maps.event.addListener(this.map, 'center_changed', function () {
          //HERE I AM GETTING ABOVE MENTIONED ERROR:
          alert(this.map.getCenter());
        });
        resolve(true);
      }, (err) => {
        console.log(err);
      });

    });

  }

  disableMap(): void {

    if (this.pleaseConnect) {
      this.pleaseConnect.style.display = "block";
    }

  }

  enableMap(): void {

    if (this.pleaseConnect) {
      this.pleaseConnect.style.display = "none";
    }

  }

  addConnectivityListeners(): void {

    this.connectivityService.watchOnline().subscribe(() => {

      setTimeout(() => {

        if (typeof google == "undefined" || typeof google.maps == "undefined") {
          this.loadGoogleMaps();
        }
        else {
          if (!this.mapInitialised) {
            this.initMap();
          }

          this.enableMap();
        }

      }, 2000);

    });

    this.connectivityService.watchOffline().subscribe(() => {

      this.disableMap();

    });

  }

}

Answer 1

改变这个：

google.maps.event.addListener(this.map, 'center_changed', function () {
    //HERE I AM GETTING ABOVE MENTIONED ERROR:
    alert(this.map.getCenter());
});

到

google.maps.event.addListener(this.map, 'center_changed', () => {
    //HERE I AM GETTING ABOVE MENTIONED ERROR:
    alert(this.map.getCenter());
});

@Suraj Rao，建议的问题是范围，你最好知道什么时候使用 箭头函数，如果不是，因为 function(){} 你不是 获取其中的父级范围，如果你想使用的话 () => {}