地理位置API不适用于移动设备

Question

我在React / Redux上编写我的Web应用程序。我需要借助Geolocation API获取用户位置。在桌面浏览器上一切正常，但在手机上（在小米Redmi Note 3和iPhone 5s上检查）它会抛出错误代码1 - 权限被拒绝。并且它不会请求获取该位置的任何权限。

这是我在我的网站上运行的测试样本：

componentDidMount() {
    if (window.navigator.geolocation) {
        window.navigator.geolocation.getCurrentPosition(position => {
            alert(position.coords.latitude + ' ' + position.coords.longitude);
        }, err => {
            alert('ERROR: ' + err.code);
        });
    } else {
        alert('Geolocation API is not supported!');
    }
}

这个问题的解决方案是什么？

Answer 1

遇到同样的问题......解决了：

检查您的手机权限，以便分享您的位置。

在iPhone上： 设置 - ＆gt;定位服务 - ＆gt; [您的浏览器]

https://support.apple.com/en-ca/HT203033

加了：

Chrome需要https才能使用地理位置： https://developers.google.com/web/updates/2016/04/geolocation-on-secure-contexts-only

Answer 2

截至 2021 年 ，这仍然不起作用。

This is the link in that error message。
如果您想知道，它谈到“为强大的新功能首选安全来源”，而位置则被视为这些强大功能之一。

要生成上述内容，请按如下方式更新 error 部分：

  if (navigator.geolocation) {

    navigator.geolocation.getCurrentPosition(position => {
        // other
    },
    err => {
        // include the "code" part
        alert(`ERROR(${err.code}): ${err.message}`)
    });
  };

• 在开发过程中在桌面上...
  它有效，因为如果您阅读上述链接，您会注意到 localhost 被视为安全来源。< /p>

  事实上，即使是@chrisheyn 的 answer above 中共享的 chrome 链接，也有一个“Does this affect local development?”部分并解释了为什么这应该适用于 locahost。

---

• 那么在开发过程中移动怎么样？
  请注意，react 通过您的网络为应用提供服务，例如http://192.168.0.134:3000 并且这绝对不被视为“安全来源”。

  此问题“Can I detect at runtime if the geolocation was blocked because of not being on a secure context ”提到...由于此安全上下文问题导致的错误将返回 code 为 1，这是“权限被拒绝错误”。

---

解决方案是什么？
在 react 团队更新您的移动设备在开发过程中选择应用的方式之前，您绝对无法解决此问题。

要使用 HTML5 Geolocation API，您需要通过 HTTPS 运行应用。这意味着将您的应用程序推送到云/主机（以测试此功能），或者您是否可以设法获取此网络网址 http://192.168.0.134:3000 来执行 https 我相信后一种选择非常有用更难，但我很想知道是否有人成功。