在JavaScript类中使用回调

Use a callback in a JavaScript class

本文关键字：回调 JavaScript      更新时间：2023-09-26

目前我正在开发一个具有OOP、基于类的JavaScript结构的网站。下面是我如何实现谷歌地图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');
  }
}

我已经试过一些回调；如CCD_ 1或仅CCD_。如何调用MapView类中的renderMap()函数，以便执行一些在页面上呈现谷歌地图的调用？

一旦可用，映射脚本将调用的回调函数必须是全局函数。这就是为什么不能使用callbackGET参数指定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');
  }
}
相关文章：