在JavaScript类中使用回调

目前，我正在开发一个具有面向对象、基于类的JavaScript结构的网站。下面是我如何实现Google Maps API的：

class MapView extends Module {
  constructor(element, $) {
    super();
    this.$element = $(element);
    this.initMap();
  }

  initMap() {
    if ( !$('#gmaps-api').length ) {
      var api = 'AIzaSyAfPMecz3Pl6eh5zysrdqbPuyoVImSCYTg';
      var s = document.createElement('script');
      s.src = '//maps.googleapis.com/maps/api/js?key=' + api + '&callback=renderMap';
      s.type = 'text/javascript';
      s.id = 'gmaps-api';
      document.getElementsByTagName("head")[0].appendChild(s);
    }
  }

  renderMap() {
    console.log('called back');
  }
}

---

我已经尝试过一些回调；类似于

MapView.renderMap

或只是

renderMap

。如何调用

MapView

类中的

renderMap（）

函数，以便执行一些在页面上呈现Google Maps的调用？

回调函数必须是全局函数，一旦可用，Maps脚本将调用该函数。这就是为什么不能使用

callback

GET参数指定

MapView

实例方法

然而，您可以做的是创建对所需方法的全局引用。像这样的方法应该会奏效：

window.renderMap = this.renderMap.bind(this);

以下是完整的代码片段：

class MapView extends Module {
  constructor(element, $) {
    super();
    this.$element = $(element);
    this.initMap();
  }

  initMap() {
    if (!$('#gmaps-api').length) {

      window.renderMap = this.renderMap.bind(this);

      var api = 'AIzaSyAfPMecz3Pl6eh5zysrdqbPuyoVImSCYTg';
      var s = document.createElement('script');
      s.src = '//maps.googleapis.com/maps/api/js?key=' + api + '&callback=renderMap';
      s.type = 'text/javascript';
      s.id = 'gmaps-api';
      document.getElementsByTagName("head")[0].appendChild(s);
    }
  }

  renderMap() {
    console.log('called back');
  }
}