没有SSL连接的地理位置

时间:2016-09-07 09:56:37

标签: html5 geolocation

我正在开发一个使用地理位置坐标的应用程序。 我使用HTML5地理定位功能来查找网站访问者的位置,但问题在于Chrome不支持不安全来源的GeoLocation。

  function showPosition(){
    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(function(position){
            var positionInfo = "Your current position is (" + "Latitude: " + position.coords.latitude + ", " + "Longitude: " + position.coords.longitude + ")";
            document.getElementById("result").innerHTML = positionInfo;
        });
    } else{
        alert("Sorry, your browser does not support HTML5 geolocation.");
    }
}

以下代码getCurrentPosition无效,因为我的网站未连接SSL。

Chrome警告: getCurrentPosition()和watchPosition()不再适用于不安全的来源。要使用此功能,您应该考虑将应用程序切换到安全的来源,例如HTTPS。

还有其他方法可以在chrome上获取坐标/ LatLong值吗? [仅限不安全连接]

编辑:它在我的机器上使用localhost:80但在http上没有在测试网址中工作

5 个答案:

答案 0 :(得分:19)

var apiGeolocationSuccess = function(position) {
    alert("API geolocation success!\n\nlat = " + position.coords.latitude + "\nlng = " + position.coords.longitude);
};

var tryAPIGeolocation = function() {
    jQuery.post( "https://www.googleapis.com/geolocation/v1/geolocate?key=AIzaSyDCa1LUe1vOczX1hO_iGYgyo8p_jYuGOPU", function(success) {
        apiGeolocationSuccess({coords: {latitude: success.location.lat, longitude: success.location.lng}});
  })
  .fail(function(err) {
    alert("API Geolocation error! \n\n"+err);
  });
};

var browserGeolocationSuccess = function(position) {
    alert("Browser geolocation success!\n\nlat = " + position.coords.latitude + "\nlng = " + position.coords.longitude);
};

var browserGeolocationFail = function(error) {
  switch (error.code) {
    case error.TIMEOUT:
      alert("Browser geolocation error !\n\nTimeout.");
      break;
    case error.PERMISSION_DENIED:
      if(error.message.indexOf("Only secure origins are allowed") == 0) {
        tryAPIGeolocation();
      }
      break;
    case error.POSITION_UNAVAILABLE:
      alert("Browser geolocation error !\n\nPosition unavailable.");
      break;
  }
};

var tryGeolocation = function() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
        browserGeolocationSuccess,
      browserGeolocationFail,
      {maximumAge: 50000, timeout: 20000, enableHighAccuracy: true});
  }
};

tryGeolocation();

答案 1 :(得分:4)

以下是2017/05版Safari的非SSL解决方案

var apiGeolocationSuccess = function(position) {
    alert("API geolocation success!\n\nlat = " + position.coords.latitude + "\nlng = " + position.coords.longitude);
};

var tryAPIGeolocation = function() {
    jQuery.post( "https://www.googleapis.com/geolocation/v1/geolocate?key=AIzaSyDCa1LUe1vOczX1hO_iGYgyo8p_jYuGOPU", function(success) {
        apiGeolocationSuccess({coords: {latitude: success.location.lat, longitude: success.location.lng}});
    })
        .fail(function(err) {
            alert("API Geolocation error! \n\n"+err);
        });
};

var browserGeolocationSuccess = function(position) {
    alert("Browser geolocation success!\n\nlat = " + position.coords.latitude + "\nlng = " + position.coords.longitude);
};

var browserGeolocationFail = function(error) {
    switch (error.code) {
        case error.TIMEOUT:
            alert("Browser geolocation error !\n\nTimeout.");
            break;
        case error.PERMISSION_DENIED:
            if(error.message.indexOf("Only secure origins are allowed") == 0) {
                tryAPIGeolocation();
            }
            break;
        case error.POSITION_UNAVAILABLE:
            // dirty hack for safari
            if(error.message.indexOf("Origin does not have permission to use Geolocation service") == 0) {
                tryAPIGeolocation();
            } else {
                alert("Browser geolocation error !\n\nPosition unavailable.");
            }
            break;
    }
};

var tryGeolocation = function() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
            browserGeolocationSuccess,
            browserGeolocationFail,
            {maximumAge: 50000, timeout: 20000, enableHighAccuracy: true});
    }
};

tryGeolocation();

新部分是"案例错误.POSITION_UNAVAILABLE":

case error.POSITION_UNAVAILABLE:
// dirty hack for safari
if(error.message.indexOf("Origin does not have permission to use Geolocation service") == 0) {
    tryAPIGeolocation();
} else {
    alert("Browser geolocation error !\n\nPosition unavailable.");
}
break;

答案 2 :(得分:3)

Chrome现在可以阻止不受信任的网站使用html5地理位置。可信站点包括localhost或任何https认证域。在我的情况下,这些都不可能,所以我使用以下参数从命令行打开chrome:open -a /Applications/Google\ Chrome.app' --args --unsafely-treat-insecure-origin-as-secure="http://yoursite.test"这将我的特定域添加为可信站点。

答案 3 :(得分:2)

非常简单:打开Chrome,打开此地址,然后输入您要启用的域

chrome://flags/#unsafely-treat-insecure-origin-as-secure

enter image description here

这种方式是永久的,您不需要每次都使用chrome浏览器打开

google-chrome  --args --unsafely-treat-insecure-origin-as-secure="http://whatever.test"`

如上所述。

答案 4 :(得分:0)

对我来说,这适用于使用Chrome Version 70.0.3538.67 (Official Build) (64-bit)的Mac OSX

 open -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir=$HOME --unsafely-treat-insecure-origin-as-secure=http://www.bpl.test  --allow-running-insecure-content --reduce-security-for-testing