Блог

Моя цель-создать функцию в другом файле для импорта «getGeoLocation.ts», и это код:

 export default function getGeoLocation () {
    getLocationPromise.then((location:any) => {
        console.log(location);
        return location;
    }).catch((err) => {
        return err;
    })
}

let getLocationPromise = new Promise((resolve, reject) => {
    function success (position:any) {
        resolve({latitude: position.coords.latitude, longitude: position.coords.longitude})
    }
    function error(err:any) {
        console.warn(`ERROR(${err.code}): ${err.message}`);
    }
    var options = {
        enableHighAccuracy: true,
        timeout: 5000,
        maximumAge: 0
    };
    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(success, error, options)
    } else {
        reject("your browser doesn't support geolocation API")
    }
})
 

Я также попробовал версию без обещаний, которую я нашел в MDN:

 export default function getLocation() {
  
  var options = {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0
  };

  function error(err:any) {
    console.warn(`ERROR(${err.code}): ${err.message}`);
  }

  function success(pos:any) {
    var crd = pos.coords;
    return crd;
    console.log('Sua posição é:');
    console.log(`Latitude : ${crd.latitude}`);
    console.log(`Longitude: ${crd.longitude}`);
    console.log(`Precisão de ${crd.accuracy} metros.`);
  }

  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(success, error, options);
  } else {
    alert("Geo Location not supported by browser");
  }
}
 

У обоих одна и та же проблема, я могу «console.log(местоположение)», но я не могу «вернуть местоположение»;
чтобы вызвать другой компонент(пример ниже), как я делаю в любой другой функции, возвращающей объекты, зачем?

   import getGeoLocation from '../utils/getGeoLocation';
  const location = getGeoLocation();
  console.log(location);
 

Единственным полезным уроком, который я смог найти, было следующее: https://norbertbartos.tech/blog/use-geolocation-api-with-react-hooks/

и решение кода состоит в том, чтобы создать крючок, сочетающий состояние использования и эффект использования:

 import { useState, useEffect } from 'react';

export const geolocationOptions = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 1000 * 3600 * 24
};

export default function useCurrentLocation () {
  const [location, setLocation] = useState<any>();
  const [error, setError] = useState('');

  const handleSuccess = (position:any) => {
    const { latitude, longitude } = position.coords;
    setLocation({latitude,longitude});
  };

   const handleError = (error:any) => {
    setError(error.message);
  };

  useEffect(() => {
    if (!navigator.geolocation) {
      setError('Geolocation is not supported.');
      return;
    }
    navigator.geolocation.getCurrentPosition(handleSuccess, handleError, geolocationOptions);
  }, []);

  return { location, error };
};
 

Тогда я могу вызвать любой другой компонент

 import useCurrentLocation from '../utils/useCurrentLocation';
const {location, error} = useCurrentLocation();
console.log(location?.latitude);
console.log(location?.longitude);