Question

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

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。

Answer 1

不，特别是在Chrome中。

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

如果您使用Cordova并创建移动应用，则可以使用本机功能访问不使用https的位置。

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

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

Answer 2

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

使用IP位置服务

这些使用用户IP地址来查找其位置。为此目的，IPInfo等网站。然而，有时这些可能会非常不稳定，如果您需要，可能无法提供准确的位置。

使用Google Maps Geolocation API

这显然伴随着使用限制。您可以使用答案https://stackoverflow.com/a/37276372/4374566

使用BrowserSync

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

npm install -g browser-sync

您可以使用

browser-sync start --https

这会首次在Chrome上发出警告页面（他们真的在寻找我们），但你可以跳过它。

然而，在所有解决方法中，其他浏览器实际上可能正在实现相同的功能。 Here是Firefox。因此，最佳解决方案可能是使用Let's Encrypt等服务获取网站的HTTPS证书。

Answer 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);
};

JavaScript：获取用户位置

3 个答案: