在没有 Google API 的情况下使用浏览器 GeoLocation？

Question

我需要从 Web 客户端获取用户的位置。 由于某些国家/地区的 Google 限制（有关更多信息，请参阅 this question on Stackoverflow），以下代码将返回 一个空对象（在浏览器控制台中，chrome、safari、等等。）：

navigator.geolocation

所以，我不能在 geolocation API 中使用getCurrentLocation 和其他方法 我正在使用不同的方法来查找用户位置（IP 基础），但它无法正常工作。

还有其他方法可以找到用户位置坐标吗？

更新（2020 年 7 月 12 日）：

由于误解，我更新了我的帖子。 有些人说它适用于HTTPS。 于是我打开Chrome浏览器，搜索StackOverflow（这个网站是众所周知的HTTPS）

现在在控制台上，没有任何 navigator.geolocation 的数据：

Answer 1

MDN reference:

此功能仅在安全环境 (HTTPS) 中、部分或全部支持的浏览器中可用。

我认为您正在尝试在开发模式下使用此功能，但它不起作用。 但是有一种方法可以在开发模式下解决这个问题，那就是在你的开发模式下使用假 https。

更新（2020 年 7 月 12 日）：

我在 Stackoverflow 控制台中的地理位置对象（检查元素）。

Geolocation 对象实际上是空的，您应该看到它的原型用户 __proto__。

如果您在项目中使用 create-react-app，则应在 .env 文件中添加 HTTPS=true。它对我有用。

Answer 2

要在网络客户端上查找用户的地理位置，您可以使用 HTML Geolocation API 和 Google Geolocation (refer this question on stackoverflow)。但是在浏览器上允许知道他们的位置（浏览器位置权限）总是需要得到用户的许可。如果用户不允许，Geolocation api 将不会提供任何结果。

尽管允许用户使用，但与移动设备（使用内置 GPS）不同，在计算机上运行的网络浏览器所产生的某些地理位置不会精确或什至不接近（没有内置 GPS）。如果用户使用的是 VPN 或代理，那么找到精确的地理位置也很困难。

所以总结一下，我们无法得到；

1. 每个用户在未经他们许可的情况下进行地理位置定位
2. 在他们的网络访问设备上没有原生 GPS 并且在使用 vpn 时，100% 准确度。

Answer 3

API 的另一种选择可能是GeoJS API。它基于Maxmind's GeoLite 数据库。

注意：在上述API中，所有HTTP的请求都会重定向到HTTPS。

Answer 4

您可以尝试使用地理定位 API 获取用户位置，并使用用户的 IP 地址进行回退，以防该 API 在用户环境中不起作用。

const success = (position) => {
  // use position
};

const fallback = () => {
  // try getting it via the user's IP
}

navigator.geolocation.getCurrentPosition(success, fallback);

当然，这完全取决于您需要多少精度。 IP 地址定位精度不高。

Answer 5

如果您想在不使用Google geolocation API 的情况下从客户端查找用户位置，您仍然可以使用许多浏览器广泛支持的browser embedded geolocation API。两者之间的主要区别在于，浏览器嵌入式 API 会要求用户允许分享他们的位置，而 Google 会跳过这一步。此外，本机浏览器地理定位 API 可通过 https 连接或在安全上下文中工作。

如果您已经拥有用户的 IP 地址，则可以调用地理定位服务。一个很好的免费服务是IPSTACK，这是他们使用 JQuery 的文档中的一个示例：

// set endpoint and your access key
var ip = '134.201.250.155'
var access_key = 'YOUR_ACCESS_KEY';

// get the API result via jQuery.ajax
$.ajax({
    url: 'https://api.ipstack.com/' + ip + '?access_key=' + access_key,   
    dataType: 'jsonp',
    success: function(json) {

        // output the "capital" object inside "location"
        alert(json.location.capital);
        
    }
});