我正在使用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);
}
答案 0 :(得分: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
答案 1 :(得分:0)
如果您使用了箭头函数而不是create: function () {
,则值中的this
将成为调用createPool
的对象(具有map
属性),而不是factory
。
答案 2 :(得分:0)
尝试将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
}