javascript - typescript 访问监听器内的全局变量

Question

我有一个 Angular 2 项目，我想测试事件监听器。这是定义的

map;

然后在我有的填充 map 方法中

  populateMap() {


var place = { lat: -17.822828, lng: -31.046727 };
this.map = new google.maps.Map(document.getElementById('map'), {
  zoom: 12,
  center: place,
  mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
    position: google.maps.ControlPosition.TOP_RIGHT
  },
  maxZoom: 19
});


this.map.addListener('click', function (e) {
 var marker = new google.maps.Marker({
    position: e.latLng,
    map: this.map
  });
  this.map.panTo(e.latLng);
});


this.map.fitBounds(this.bounds);
this.map.panToBounds(this.bounds);
}

在

的监听器中抛出异常

Uncaught TypeError: Cannot read property 'panTo' of undefined

javascript 找不到正确的“this.map”引用是什么原因，忘记说了，这是 Google Maps API v3

Answer 1

您处于不同的上下文中，因此 this 不引用外部上下文。您必须保留对它的引用，例如

var self = this;
this.map.addListener('click', function (e) {
 var marker = new google.maps.Marker({
    position: e.latLng,
    map: self.map
  });
  self.map.panTo(e.latLng);
});