如何检测用户何时允许在浏览器中定位？

Question

对于 Web 应用程序，当用户在先前不相关的字段上选择单选按钮时，我将通过调用 attemptsLocation() 来触发下一步的位置。

  const attemptLocation = () => {
    if ("geolocation" in navigator) {

可能的情况是：

1. 浏览器中会出现一个弹出窗口，用户立即允许该位置 -

   Works !

2. 用户点击“阻止”，位置不可用。然后，用户意识到他们无法继续，因此他们单击浏览器中的位置图标和

   allow

   位置。

如何在浏览器中检测他们从

block

到

allow

所做的更改，因为现在

• 在 Chrome 中：页面未检测到

  allow

  的更改，并且用户得到 卡住了。

• 在 Firefox 中：除非用户单击

  remember this selection

  即使用户浏览器不断询问相同的

  allow or not

  问题 说

  allow

  并刷新了页面。

• 在 Edge 中：当用户更改为允许时，位置会更新，并且

  works

  但只有在刷新页面并重新开始后才会再次更新

简化问题： 页面加载后，阻止位置的用户从阻止更改为允许位置，我如何发出警报（“感谢您从阻止位置更改为允许位置”）？

Answer 1

感谢@GabrielePetrioli 的评论。下面的代码使用

navigator.permissions.query

权限状态更改事件

我正在检查是否已授予权限并通过调用更新位置的函数来更新应用程序。

const [locationAccess, setLocationAccess] = useState(false);//user changes in browser
...
      //check user location changes in navigator
      navigator.permissions.query({ name: 'geolocation' }).then((permissionStatus) => {
       
          permissionStatus.onchange = () => {
          setLocationAccess(permissionStatus.state=="granted")

          if (permissionStatus.state=="granted") {
              attemptLocation();
            }
          };
        });

  

Answer 2

从浏览器中调用 http://locater.info/，您应该会获取数据

Answer 3

在您的应用程序中，当您的应用程序安装时，使用

useEffect()

检查以下内容：

if ("geolocation" in navigator) {
      console.log("Available");
   } else {
      console.log("Not Available");
   }

如果是

Available

，您就可以访问各种地理位置属性。如果您无法访问此属性，则用户已禁用位置访问。

基于此，您可以使用

useState()

钩子创建一些状态逻辑，以便在您的应用程序中使用。