javascript - 如何在 JavaScript 的回调中调用 typescript 函数

Question

我在 Angular 5 前端框架中使用 javascript Google Maps 组件

export class MapComponent implements OnInit {
  ngOnInit() {
    this.initializeGMap()
  }

  initializeGMap() {
    var myLatlng = new google.maps.LatLng(12,77);

    var mapOptions = {
        zoom: DEFAULT_MAP_ZOOM,
        center: myLatlng,
        scrollwheel: true,
        styles: MAP_STYLE
    };
    this.map = new google.maps.Map(document.getElementById("map"), mapOptions);
    this.initOnMapClickListener();
  }

  initOnMapClickListener() {
      google.maps.event.addListener(this.map, 'click', function(event) {

      var selectedLocation = new google.maps.LatLng(event.latLng.lat(), event.latLng.lng());
      this.addMarker(selectedLocation)
    });
  }

addMarker(latlng) {
    var marker = new google.maps.Marker({
      position: latlng,
      map: this.map,
      icon: './assets/map_marker.png'
    });
  }

}

上面是我的 typescript 文件，它有三个功能

1. initializeGMap()//初始化谷歌地图
2. initOnMapClickListener()//初始化 map 点击监听器
3. addMarker(latlng)//在 onmapclick 事件发生时添加标记

Uncaught TypeError: Cannot read property 'addMarker' of null

这是我在运行 Angular 应用程序时遇到的控制台错误

请帮助理解如何在 Javascript 回调中调用 typescript 函数

Answer 1

尝试像这样使用箭头函数 => 调用函数以绑定(bind)到 this 的词法作用域 -

initOnMapClickListener() {
      google.maps.event.addListener(this.map, 'click', (event) => {

      var selectedLocation = new google.maps.LatLng(event.latLng.lat(), event.latLng.lng());
      this.addMarker(selectedLocation)
    });
  }