Возврат значений из API геолокации

Question

Я пытаюсь вернуть долготу и широту пользователя из api геолокации, но до сих пор я продолжаю получать ошибки, когда пытаюсь использовать их вне функции.

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

window.navigator.geolocation.getCurrentPosition(
  position => {
    const location = {
      lat:position.coords.latitude,
      long:position.coords.longitude
    }
    return location
  },
  (err)=>console.log(err),

);
console.log(location)

Я ожидаю получить код внутри объекта "местоположение", расположенного в функции позиции. Пожалуйста, помогите

Answer 1

В HTML5 API getcurrentPosition - это assync, самый простой способ использовать местоположение - использовать функцию обратного вызова, например:

window.navigator.geolocation.getCurrentPosition(
  position => {
    const location = {
      lat:position.coords.latitude,
      long:position.coords.longitude
    }
    showLocation(location); // <- Function that will use location data
  },
  (err)=>console.log(err),

);
function showLocation(location) {
    console.log(location);
    //other stuff    
}

эта ссылка может помочь лучше понять:https://developer.mozilla.org/en-US/docs/Glossary/Callback_function

Answer 2

Вы можете заключить свою функцию в Promise и дождаться ее разрешения. Таким образом, вы можете извлекать значения, когда они становятся доступными, используяthenметод. Это похоже на добавление обратного вызова, но работает по-другому.

Таким образом, приведенный ниже код не выполняется здесь в SO по соображениям безопасности, но он будет в вашем собственном файле.

В Promiseможет принимать функцию обратного вызова с 2 параметрами.resolve а также reject.

resolve можно рассматривать как что-то вроде return. Но вместо того, чтобы возвращать значение, он сохраняет его вPromise и изменил состояние Promise к resolved. Когда это происходит, все сопутствующиеthen методы будут вызываться.

reject когда возникает ошибка или вы просто не хотите Promise к resolve. Он называет прилагательноеcatch блок после Promise заявление.

в then а также catch блоки, к которым вы можете получить доступ resolved или rejected ценности.

Ознакомьтесь с другими примерами в этой статье Medium.

/**
 * Wrap function in a Promise.
 * Resolve when position is found.
 * Reject when error occurs.
 */
const getLocation = () => new Promise(
  (resolve, reject) => {
    window.navigator.geolocation.getCurrentPosition(
      position => {
        const location = {
          lat:position.coords.latitude,
          long:position.coords.longitude
        };
        resolve(location); // Resolve with location. location can now be accessed in the .then method.
      },
      err => reject(err) // Reject with err. err can now be accessed in the .catch method.
    );
  }
);

/**
 * then is called when the Promise is resolved
 * catch is called when the Promise rejects or encounters an error.
 */
getLocation()
    .then(location => console.log(location))
    .catch(error => console.log(error));