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のようになります。 MapViewクラス内にあるrenderMap()関数を呼び出すにはどうすればよいですか？ページ上にGoogleマップを表示する呼び出しをいくつか実行できますか？

Answer 1

マップスクリプトによって利用可能になるコールバック関数は、グローバル関数でなければなりません。そのため、 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'); 
    } 
}