Асинхронные проблемы с геолокацией и реакцией-Google-карты - PullRequest
Новая
       32

Асинхронные проблемы с геолокацией и реакцией-Google-карты

0 голосов
/ 29 мая 2019

Я внедряю указания карт Google в компонент реагирования и пытаюсь использовать navigator.geolocation в качестве исходного местоположения. Предупреждение: я довольно новичок в React и Node.

У меня есть два основных метода, которые вызываются в ComponentDidMount, setStartLoc () , который устанавливает начальное местоположение для результата navigator.geolocation (если пользователь разрешает, в противном случае по умолчанию используется только жестко закодированное местоположение), и GetDirections () , который запрашивает карты API для указания направления от начального местоположения к месту назначения (аргументы функции). 

componentDidMount() {
    //get geoLocation and print
    const startLoc = this.setStartLoc();
    console.log(startLoc);

    //set destination
    const destinationLoc =  "50.927884,  -1.299285";

    //get directions once start location returned
    startLoc.then(function(startLoc){
      this.getDirections(startLoc,destinationLoc).bind(this)
    })
  }

У меня возникли проблемы с асинхронной функцией getDirections , которая запрашивает указания перед тем, как пользователь сможет разрешить их геолокацию, что приводит к ошибке, возвращаемой из API.

Я пытался заставить getDirections ждать, реализовав setStartLoc в качестве обещания и используя .then : 

  setStartLoc = function() {
    return new Promise(function(resolve,reject){
        if (navigator && navigator.geolocation) {
            console.log("in navigator");
            //get browser geolocation:
            navigator.geolocation.getCurrentPosition(pos => {
                resolve(pos.coords.latitude + ", " + pos.coords.longitude);
            });
        }
        else{
            //hardcoded alternative start location
            resolve("50.927044, -1.299964");
        }
    })
  }

Насколько я знаю, это работает, заставляя getDirections ждать, но это приводит к следующей ошибке типа.

"Ошибка типа: это не определено"

Где это относится к следующему коду в componentDidMount . 

  this.getDirections(startLoc,destinationLoc).bind(this)

Я естественно пытался добавить / удалить привязку, но возникает та же ошибка.

Может кто-нибудь помочь с этой ошибкой, исправив показанный код или предложив альтернативный метод, заставляющий функцию getDirection () ждать запроса, когда setStartLoc () имеет вернулся?

Метод getDirections и остальной код компонента были взяты из этого руководства , где можно увидеть полный код для компонента здесь - к которому я добавил setStartLoc и изменили componentDidMount , как показано.

Заранее спасибо за любую помощь!

Макс

1 Ответ

0 голосов
/ 29 мая 2019

Вы были на правильном пути, обещая функцию setStartLoc, но, чтобы обойти вашу проблему с областью видимости, @Jaromanda X абсолютно прав, вам понадобится функция стрелки здесь.

со стрелкойфункции, вы могли бы сделать что-то вроде этого в вашем componentDidMount: 

startLoc.then(startLoc => {
   this.getDirections(startLoc, destinationLoc);
});

Где startLoc определяется примерно так: 

setStartLoc = () => {
    return new Promise(function(resolve, reject) {
      if (navigator && navigator.geolocation) {
        console.log("in navigator");
        //get browser geolocation:
        return navigator.geolocation.getCurrentPosition(
          pos => {
            return resolve(pos.coords.latitude + ", " + pos.coords.longitude);
          },
          err => resolve("50.927044, -1.299964") // if user refuses access, return with default
        );
      }
      return resolve("50.927044, -1.299964");
    });
  };

Для полноты вот это codesanbox

...