从 Google Maps 的 StreetViewService.getPanorama({},callback) 方法更改外部变量

Question

我运行遇到这段代码的麻烦，因为我不确定如何修复它。我已经在聊天中问过这个问题，但在得到一些答案后我自己也想不通。我想使用来自 StreetViewService getPanorama() 方法的 Google Maps javascript API 中的方法从 StreetViewService 获取全景图。该方法接收一个带有坐标和半径的文字，以及一个接收 2 个参数的回调函数：数据和状态。在那个回调中，你检查服务 return 是否有一些街景图像，在这种情况下你做一个或另一个。

似乎回调是异步执行的或 getPanorama 方法，在幕后执行某种ajax。

我正在粘贴下面的代码，但首先我要解释一下我的意图。我需要 return 从我在自制库内的文字中制作的一种方法，无论请求是否具有该请求坐标的有效图像，方法是将变量设置为 true 或 false 然后在最后 returning那个值。但是，即使我在该回调匿名函数中将变量设置为 true，当变量 returns 时，它始终具有初始值而不会被更改。

这里是代码。不是全部，只是基本代码。然后我的目的是使用布尔值 returned 来知道我是否必须将一个按钮切换为活动状态以进行某种工作，或者是否做某些事情取决于它 returned 是真还是假，改变一些风格等。如果您能以可行的方式更改我的代码，我将不胜感激。有人告诉我回调解决方案或将其包装到承诺中。但是我不知道该怎么做。我在 jquery 中使用了 promise，但在 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

在 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、异步 JavaScript 和回调进行一些研究。

从 Google Maps 的 StreetViewService.getPanorama({},callback) 方法更改外部变量

Altering external variable from Google Maps' StreetViewService.getPanorama({},callback) method

javascript

google-maps

asynchronous

google-maps-api-3

google-street-view