Google MapsのStreetViewService.getPanorama（{}、コールバック）メソッドから外部変数を変更する

Question

このコードを修正する方法がわからないので、このコードで問題が発生しています。私はすでにチャットでこれを尋ねましたが、いくつかの答えの後に自分自身を理解することができませんでした。 StreetViewServiceのgetPanorama（）メソッドのGoogle Maps JavaScript APIのメソッドを使用して、StreetViewServiceからPanoramaを取得したいとします。 このメソッドは、座標と半径を持つリテラルと、dataとstatusの2つのパラメータを受け取るコールバック関数を受け取ります。そのコールバックで をチェックすると、サービスがストリートビューの画像を返すかどうかを確認することができます。この場合、あなたは何か別のことを行います。

コールバックが非同期に実行されるか、または何かのAjaxをバックグラウンドで実行するgetPanoramaメソッドのようです。

私は以下のコードを貼り付けていますが、まず私の意図を説明します。私は自分が作成した図書館の中にあるリテラルの中のリテラルの中からリターンする必要があります。要求には要求された座標の有効な画像がありますかどうかは、変数をtrueまたはfalseに設定し、しかし、コールバックの無名関数の中で変数をtrueに設定しても、変数が返っても、変更されずに常に初期値になります。

ここにコードです。すべてではなく、必須コードです。 私の意図は、ある種のジョブに対して1つのボタンをアクティブにするかどうか、またはtrueまたはfalseを返すかどうかによっていくつかのことを行うかどうか、いくつかのスタイルなどを変更する必要があるかどうかを知るために返されるbooleanを使用することです。 私のコードを変更できるかどうかは分かります。私はコールバックの解決策や約束事にそれをラップすることについて話を聞いた。しかし、私はそれを行う方法を知らない。私はjqueryでpromissesを使用しましたが、vanilla 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

何らかのアクションを行うか、getPanorama()に（とプロキシ、setStreetView()により）AJAXコールの後、いくつかの変数を変更するために、コールバックを使用して完了です。

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、非同期JavaScript、およびコールバックのいくつかの研究を行う示唆しています。