Изменение внешней переменной из метода GoogleView StreetViewService.getPanorama({}, обратный вызов)

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

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

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

Здесь код. Не все, просто необходимый код. Затем я намерен использовать возвращаемое логическое значение, чтобы узнать, нужно ли мне переключать одну активную кнопку для какой-либо работы или нет, или делать что-то, или нет, в зависимости от того, вернул ли он значение true или false, изменить какой-либо стиль и т. Д. Буду признателен, если вы сможете изменить мой код так, как это можно сделать. Мне сказали о решении обратного вызова или оборачивании его в обещание. Однако я не знаю, как это сделать. Я использовал обещания в 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);
}

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 и обратные вызовы.

Другие вопросы по тегам