地理位置导出纬度和经度

Question

I am using two functions the first is using the geolocation API and i want to return the lat and lng

In the second function i want to fetch some data with this coordinates but i can't export it properly on first function.

I get geolocationData() is not a function.

Here is my code

const geolocationData = () => {
    return navigator.geolocation.getCurrentPosition((position) => {
        return position
    }, () => {
        alert('Unable to fetch your location')
    }, { enableHighAccuracy: true })
}

const gpsLocation = async () => {

    const lat = geolocationData().position.coords.latitude
    const lng = geolocationData().position.coords.longitude

    const address = await fetch(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}&result_type=administrative_area_level_4&key=0000000000000000`)
    const weatherData = await fetch(`https://cors-anywhere.herokuapp.com/https://api.darksky.net/forecast/0000000000000/${lat},${lng}?units=si&extend=hourly&exclude=flags&lang=el`)

    return {
        address: address.json(),
        weatherData: weatherData.json()
    }
}

Answer 1

That is because getCurrentPosition works in a different way than you anticipate it to, as it does not return lat and long directly.

Let me refactor that code a little bit.

I would approach it by creating a promise which resolves with current geo coordinates and call this promise in your main gpsLocation function. Since you are using async/await , I'll also keep it like that. Overall, it would look something like this:

//  a promise that resolves with geo coordinates
const getPosition = (options) => {
  return new Promise(function (resolve, reject) {
    navigator.geolocation.getCurrentPosition(resolve, reject, options);
  });
}

const gpsLocation = async () => {

    try {

        // calling the promise and awaiting the position object
        const geolocationData = await getPosition({ enableHighAccuracy: true });

        // destructruing the coordinates from the object
        const {latitude: lat, longitude: lng} = geolocationData.coords;

        // creating promises for each api call
        const addressPromise = fetch(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}&result_type=administrative_area_level_4&key=0000000000000000`)
        const weatherDataPromise = fetch(`https://cors-anywhere.herokuapp.com/https://api.darksky.net/forecast/0000000000000/${lat},${lng}?units=si&extend=hourly&exclude=flags&lang=el`);

        // wating for the promises to be resolved in parallel (rather than one after another)
        const [address, weatherData] = await Promise.all([addressPromise, weatherDataPromise]);

        return {
            address: address.json(),
            weatherData: weatherData.json()
        }

    } catch(e) {
        alert('Unable to fetch your location')
    }


}

And here is how it could be used:

(async () => {

    const { address, weather } = await gpsLocation();

    console.log(address);
    console.log(weather);

})();

Let me know of the above works for you ;)