Question

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

尝试调用alert时，在google.maps.event.addListener内部（this.map.getCenter（））;

我收到以下错误：

main.js：564个
  TypeError：无法读取属性＆＃39; getCenter＆＃39;未定义的   main.js：569个
      在Qg。（文件：///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）
      at t.invokeTask（file：///android_asset/www/build/polyfills.js：3：15660）

版本：
＆＃34; @ angular / common＆＃34;：“5.0.0”，
＆＃34; @ ionic-native / core＆＃34;：“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(){}你不是如果你愿意，你应该使用它的父母范围 () => {}

this.map.getCenter（）无法读取属性

1 个答案: