Изменение внешней переменной с помощью метода StreetViewService.getPanorama ({}, callback) на Картах Google

Question

У меня возникают проблемы с этим фрагментом кода, так как я не уверен, как его исправить. Я уже спрашивал об этом в чатах, но не смог понять себя после некоторых ответов. Я хочу получить Panorama из StreetViewService, используя метод API javascript Google Maps из метода getViewa() StreetViewService. Метод получает литерал с координатами и радиусом и функцию обратного вызова, которая получает 2 параметра: данные и статус. в этом обратном вызове вы проверяете, обслуживает ли он некоторые изображения для просмотра улиц или нет, и в этом случае вы делаете то или другое.

Кажется, обратный вызов выполняется асинхронно или метод getPanorama, выполняющий какой-то ajax за кулисами.

Я вставляю код ниже, но сначала объясню свои намерения. Мне нужно вернуться из одного метода, который я сделал внутри литерала, который находится внутри собственной библиотеки, чтобы запрос имел правильные изображения для этих запрошенных координат или нет, установив переменную в true или false, а затем в конце возвращающее это значение. Однако, даже если я устанавливаю переменную в true внутри этой анонимной функции обратного вызова, когда переменная возвращается, она всегда имеет начальное значение, не изменяя ее.

Здесь код. Не все, просто важный код. Тогда мое намерение - использовать логическое значение, возвращаемое, чтобы узнать, нужно ли мне переключаться на одну кнопку для какой-либо работы или нет или делать что-то или нет, в зависимости от того, вернулась ли она true или false, также измените стиль и т. Д. Буду признателен, если бы вы могли изменить свой код так, как это можно было бы сделать. Мне сказали о решении обратного вызова или обернули его в обещание. Однако я не знаю, как это сделать. Я использовал promisses в jquery, но не в ванильном javascript. Я хотел бы посмотреть, как можно было бы сделать решение обратного вызова с помощью этого кода.

//Library not show for shortenning the example. 
streetView: { //This is inside a library 
    valid_request: false, 
    event_key: null, 
    panorama: null, 

    setStreetView: function(coords, element) { 
    libMapa.streetView.valid_request = false; // Initialize the value again. 

    let sv_service = new google.maps.StreetViewService(); 
    var latlng = coords; 

    sv_service.getPanorama({ // This is a method from Google Map Javascript API. 
     location: latlng, 
     radius: 50 
    }, function(data, status) { 
     if (status === google.maps.StreetViewStatus.OK) { 

     if (!libMapa.streetView.panorama) { 
      libMapa.streetView.panorama = new google.maps.StreetViewPanorama(element); 
      libMapa.streetView.panorama.setEnableCloseButton(true); 
     } 
     libMapa.streetView.panorama.setPano(null); 
     libMapa.streetView.panorama.setPano(data.location.pano); 
     libMapa.streetView.panorama.setVisible(true); 

     libMapa.streetView.valid_request = true; 

     } else { 
     alert("No images for this place"); 
     // Otherwise variable stays as FALSE. 
     } 
    }); 
    return libMapa.streetView.valid_request; 
    } 
} 

/****************************************/ 
//OUTSIDE THE LIBRARY IN INDEX.HTML 

var sv_valid = libMapa.streetView.setStreetView(coords, div_mapa); 
//sv_valid still shows false even if it should return true. 
if (sv_valid) { 
    // "pressed" is to control a button as if it was a switch by activatinc and deactivating it. 
    pressed = false; // It always ends up being false even when it should return true. 
    element.style.cursor = "default"; 
    libMapa.mapa.unByKey(libMapa.streetView.event_key); 
} 

Answer 1

Используйте функцию обратного вызова, чтобы сделать какое-либо действие или изменить некоторые переменные после вызова AJAX для getPanorama() (и по доверенности, setStreetView()) завершена.

Изменить setStreetView(), чтобы принять параметр обратного вызова и передать его до getPanorama().

streetView { 

    // streetView variables etc. 

    setStreetView: function(coords, element, callback) { 

     // get ready for the AJAX call etc. 

     sv_service.getPanorama({ 
      // parameter object 
     }, function(data, status){ 
      // The getPanorama() callback. 
      // Do stuff with the data/status here, 
      // then call the callback function that you passed in to setStreetView. 
      // You can send data along (e.g. the result of the AJAX call) to the callback. 
      callback(someResult); 
     }); 
    } 
} 

// somewhere else, where you're calling streetView.setStreetView() 
var someVar = "foo"; 
streetView.setStreetView(someCoords, someElement, function(eventualResult){ 
    someVar = eventualResult; 
}); 

Вот небольшой пример: https://jsfiddle.net/_jered/pgftxgf3/

Я также настоятельно рекомендую вам сделать некоторые исследования на AJAX, Asynchronous JavaScript и обратных вызовов.