Question

我正在使用Ionic Native Google Maps plugin的Ionic 3应用程序。我正在尝试将node pool与Google地图实例一起使用来创建标记池。

我的问题是，在createPool函数的新Promise中，this.map是未定义的，即使它已由loadMap（）函数创建。我阅读了有关承诺的this awesome post但我无法弄清楚这是如何适用于我的情况的。如果有人能帮助我，我将非常感激。

ngAfterViewInit() {
    this.platform.ready()
      .then(_ => {
        return this.loadMap()
      })
      .then(_ => {
        this.markerpool = this.createPool();
        this.markerpool.on('factoryCreateError', err => console.log(err));
      })
} 


createPool() {
    var factory = {
      create: function () {
        return new Promise((resolve, reject) => {
          this.map.addMarker({
            icon: 'assets/icon/sun.png',
            visible: false
          })
            .then(marker => {
              // icon anchor set to the center of the icon
              marker.setIconAnchor(42, 37);
              resolve(marker);
            })
        })
      },
      destroy: function (marker: Marker) {
        return new Promise((resolve, reject) => {
          marker.remove();
          resolve();
        })
      }
    }
    var opts = {
      max: 60, // maximum size of the pool
      min: 20 // minimum size of the pool
    }
    return GenericPool.createPool(factory, opts);
  }

loadMap() {
    this.mapElement = document.getElementById('map');
    let mapOptions: GoogleMapOptions = {
      camera: {
        target: {
          lat: 40.9221968,
          lng: 14.7907662
        },
        zoom: maxzoom,
        tilt: 30
      },
      preferences: {
        zoom: {
          minZoom: minzoom,
          maxZoom: maxzoom
        }
      }
    };

    this.map = this.googleMaps.create(this.mapElement, mapOptions);
    this.zoomLevel = this.getZoomLevel(maxzoom);
    return this.map.one(GoogleMapsEvent.MAP_READY);
  }

Answer 1

新Promise中的this与加载地图的外部this不同。您可以在factory中声明一个成员变量，该变量分配给外部this或外部地图，并在新的Promise中使用它。

var factory = {
    outerthis: this, //or outermap:this.map
    create: ...
       ...
       this.outerthis.map.addMarker(... //or access this.outermap.addMarker directly

Answer 2

如果您使用了箭头函数而不是create: function () {，则值中的this将成为调用createPool的对象（具有map属性），而不是factory。

Answer 3

尝试将var替换为let。 let保持函数外部的变量范围。您还需要使用()=>{}代替function()

let factory = {
  create: () => {
    return new Promise((resolve, reject) => {
      this.map.addMarker({
        icon: 'assets/icon/sun.png',
        visible: false
      })
      .then(marker => {
        // icon anchor set to the center of the icon
        marker.setIconAnchor(42, 37);
        resolve(marker);
      })
    })
  },
  destroy: (marker: Marker) => {
    return new Promise((resolve, reject) => {
      marker.remove();
      resolve();
    })
  }
}
let opts = {
  max: 60, // maximum size of the pool
  min: 20 // minimum size of the pool
}

变量在promise中变得不确定

3 个答案: