在JavaScript类

Question

目前，我正在使用基于OOP，基于类的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。如何调用renderMap()类中的MapView函数，以便执行一些在我的页面上呈现Google地图的调用？

Answer 1

一旦地图脚本可用，它将调用的回调函数必须是全局函数。这就是为什么您无法使用MapView GET参数指定callback实例方法的原因。

但您可以做的是创建必要方法的全局引用。这样的事情应该有效：

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');
  }
}