reactjs - getCurrentPosition PWA React 无法返回位置失败
问题描述
我的目标是在另一个文件中创建一个函数来导入“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(location)”但我不能“return location;” 调用另一个组件(下面的示例),就像我在任何其他返回对象的函数中所做的那样,为什么?
import getGeoLocation from '../utils/getGeoLocation';
const location = getGeoLocation();
console.log(location);
解决方案
我能找到的唯一有用的教程是: https ://norbertbartos.tech/blog/use-geolocation-api-with-react-hooks/
代码解决方案是创建一个结合useState和useEffect的钩子:
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);
推荐阅读
- php - 如何将php文件复制到csv文件并下载?
- node.js - Mac 上的 NPM 问题
- ffmpeg - ffmpeg 在过滤器中使用 setdar
- vb.net - 无法将 EmbedBuilder 类型的 Discord .NET 值转换为 Embed
- python - python中的流架构后端
- c# - Html.Partial 在 MVC 视图中导致 404
- java - .equals() 方法似乎不适合我
- scala - scala 闭包功能是否有助于 Apache spark
- php - 如何自动编辑页面配置并从扩展控制器添加模板?
- matlab - Matlab For 循环变量