JavaScript：获取用户位置

Posted 2023-02-23

【中文标题】JavaScript：获取用户位置

【英文标题】：JavaScript : Get user location

【发布时间】：2017-01-01 10:32:29

【问题描述】：

我正在尝试获取用户位置。但是有这样的错误

getCurrentPosition() 和 watchPosition() 不再适用于不安全 起源。要使用此功能，您应该考虑切换您的 应用到安全源，例如 HTTPS。

这是试图获取位置的代码部分

  function initMap() 
  var map = new google.maps.Map(document.getElementById('map'), 
    center: lat: -34.397, lng: 150.644,
    zoom: 6
  );
  var infoWindow = new google.maps.InfoWindow(map: map);

  if (navigator.geolocation) 
    navigator.geolocation.getCurrentPosition(function(position) 
      var pos = 
        lat: position.coords.latitude,
        lng: position.coords.longitude
      ;

      infoWindow.setPosition(pos);
      infoWindow.setContent('Location found.');
      map.setCenter(pos);
    , function() 
      handleLocationError(true, infoWindow, map.getCenter());
    );
   else 
    handleLocationError(false, infoWindow, map.getCenter());
  


function handleLocationError(browserHasGeolocation, infoWindow, pos) 
  infoWindow.setPosition(pos);
  infoWindow.setContent(browserHasGeolocation ?
                        'Error: The Geolocation service failed.' :
                        'Error: Your browser doesn\'t support geolocation.');

有没有办法使用 HTTP 服务器（不是 HTTPS）获取 getlocation。

【问题讨论】：

如果你喜欢的话，你可以使用ipinfo.io/developers/full-ip-details 之类的服务从IP地址中找到位置。

那不会给我准确的信息，对吗？

相反，它有时会非常不稳定。为什么这么讨厌 HTTPS？

我在我的电脑上做一些测试:) 我的电脑是服务器。而且我不知道如何使该测试网站成为 HTTPS）

browsersync.io 为您提供了一个 HTTPS 服务器。不过，Chrome 上可能会有警告

【参考方案1】：

不，特别是在 Chrome 中。

为了在浏览器中获取用户位置，你必须在 HTTPS 下。

如果您使用 Cordova 并创建移动应用程序，您可以使用本机功能访问该位置而无需 https。

https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-geolocation/#cordova-plugin-geolocation

您也可以使用免费的 HTTPS 服务：https://letsencrypt.org/

【参考方案2】：

Chrome 已从 Chrome 50 中删除了来自不安全来源的 Geolocation API 使用。 你可以阅读它Here。 根据您要实现的目标，基本上有三种解决方法。

使用 IP 定位服务

这些使用用户的 IP 地址来查找他们的位置。像IPInfo 这样的网站就是为了这个目的。然而，这些有时真的很不稳定，如果您需要，可能无法提供准确的位置。

使用Google Maps Geolocation API

这显然带有使用限制。您可以使用答案https://***.com/a/37276372/4374566 将其限制为备用选项

使用BrowserSync

如果您唯一的问题是让它在 localhost 上运行（因为您的站点将具有 https），那么使用 Browsersync 测试服务器是一个福音。 使用

安装 Browsersync 后

npm install -g browser-sync

您可以从命令行启动安全服务器

browser-sync start --https

这将在 Chrome 上首次引发警告页面（他们真的在寻找我们），但您可以跳过。

但是，在所有变通方法中，其他浏览器确实可能正在寻求实现相同的方法。 Here 是火狐。 因此，最好的解决方案可能是为具有Let's Encrypt 等服务的站点获取 HTTPS 证书。

【参考方案3】：

这是一个使用 javascript 获取用户位置的工作示例。

Live CodePen Demo

HTML

<div id="nudge">
  <p>YO CAN I GET YOUR LOCATION?</p>
  <button id="theButton">yes</button>
</div>

<span id="startLat"></span>
<span id="startLon"></span>

JavaScript

var button = document.getElementById('theButton');
var nudge = document.getElementById("nudge");
var latitude = document.getElementById('startLat');
var longitude = document.getElementById('startLon');

button.onclick = function() 
  var startPos;
  var showNudgeBanner = function()  nudge.style.display = "block"; ;
  var hideNudgeBanner = function()  nudge.style.display = "none"; ;
  var nudgeTimeoutId = setTimeout(showNudgeBanner, 5000);

  var geoSuccess = function(position) 
    hideNudgeBanner(); clearTimeout(nudgeTimeoutId); startPos = position;
    latitude.innerhtml = startPos.coords.latitude;
    longitude.innerHTML = startPos.coords.longitude;
  ;

  var geoFail = function(error) 
    switch (error.code)  case error.TIMEOUT: showNudgeBanner(); break;  ;
    navigator.geolocation.getCurrentPosition(geoSuccess, geoFail);
;