我正在使用谷歌地图api v3并在我的地图上有一些多边形。我试图添加一个事件,在点击删除它们所有并调用该事件的回调函数内的另一个函数,但我一直得到TypeError:无法在第64行读取未定义的属性'length'(那是在事件监听器内部及其告知我没有定义Polys数组)。此外,如果我尝试在侦听器中添加一个函数,它不会识别它,我认为它与范围问题有关,但我不知道如何解决它。 感谢您的帮助。
export class InicioComponent implements OnInit, AfterViewInit {
locaciones: Locacion[] = [];
regiones: Region[];
polys: any[] = [];
constructor(private locacionService: LocacionService, private router: Router) { }
getLocaciones(): void {
this.locacionService.getLocaciones().then(locaciones => this.locaciones = locaciones);
}
public loadLocaciones(router: Router) {
for (let i = 0; i < this.locaciones.length; i++) {
const marker = new google.maps.Marker({
position: new google.maps.LatLng(this.locaciones[i].latitud, this.locaciones[i].longitud),
map: map,
label: {
color: 'black',
fontWeight: 'bold',
text: this.locaciones[i].nombre,
},
idLocacion: this.locaciones[i].id
});
google.maps.event.addListener(marker, 'click',() => {
router.navigate(['/locacion', this.locaciones[i].id]);
});
}
}
getRegiones() {
this.locacionService.getRegiones().then(regiones => {
this.regiones = regiones;
console.log(this.regiones);
});
}
loadRegiones(regiones: Region[]) {
for(let i = 0; i < regiones.length; i++) {
const p = new google.maps.Polygon({
paths: regiones[i].mapData.bounds,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
idRegion: regiones[i].id
});
p.setMap(map);
this.polys.push(p);
google.maps.event.addListener(p, 'click', function(event){
for( let j = 0; j < this.polys.length; j++) {
this.polys[j].setMap(null);
}
this.loadLocaciones();
});
}
}
答案 0 :(得分:4)
您需要使用箭头功能()=>
,而不是function
关键字。使用function
关键字时,您将范围缩小为this
。将您的代码更改为:
google.maps.event.addListener(p, 'click', (event) => {
for( let j = 0; j < this.polys.length; j++) {
this.polys[j].setMap(null);
}
this.loadLocaciones();
});