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

Question

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

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

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

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