Использовать обратный вызов в классе JavaScript

Question

В настоящее время я работаю над веб-сайтом с структурой JavaScript на основе ООП. Внизу показано, как я реализовал API Карт Google:

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, используя параметр callback GET.

Однако вы можете создать глобальную ссылку на необходимый метод. Нечто подобное должно работать:

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