Verwenden Sie einen Rückruf in einer JavaScript-Klasse

Question

Derzeit arbeite ich auf einer Website mit einer OOP, klassenbasierten JavaScript-Struktur. Darunter habe ich das Google Maps API implementiert:

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

Es gibt ein paar Callbacks, die ich bereits ausprobiert habe; wie MapView.renderMap oder nur renderMap. Wie kann ich die Funktion renderMap() aufrufen, die sich in der Klasse MapView befindet, damit ich einige Anrufe ausführen kann, die Google Maps auf meiner Seite darstellen?

Answer 1

Callback-Funktion, die von Maps-Skript aufgerufen wird, sobald es verfügbar ist, muss eine globale Funktion sein. Aus diesem Grund können Sie keine Instanzmethode unter Verwendung des callback GET-Parameters angeben.

Was Sie tun können, ist jedoch, globale Referenz zu notwendigen Methode zu erstellen. So etwas sollte funktionieren:

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

Hier ist komplett Schnipsel:

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