Html 没有 SSL 连接的地理定位

Geolocation Without SSL connection

提问by Niranth Reddy

I am developing an application which uses geolocation coordinates. I used the HTML5 geolocation feature to find out the location of the site visitor, but the issue is with Chrome which doesnt support GeoLocation on insecure origins.

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

  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.");
    }
}

Here is the code getCurrentPositionis not working in as my site is not SSL connected .

这是代码getCurrentPosition不起作用，因为我的站点未连接 SSL。

Warning by Chrome :getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS.

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

Is there any other way to get coordinates/LatLong values on chrome ? [on Insecure connection only]

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

EDIT: It is working in my machine using localhost:80 but not working in test url which is on http

编辑：它在我的机器上使用 localhost:80 工作，但在 http 上的测试 url 中不起作用

回答by Mannan Bahelim

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();

回答by stackPusher

Chrome now prevents untrusted sites from using html5 geolocation. Trusted sites include localhostor any https certified domain. In my case neither of these were possible so instead i opened chrome from the command line with this argument: open -a /Applications/Google\ Chrome.app' --args --unsafely-treat-insecure-origin-as-secure="http://yoursite.test"Which added my particular domain as a trusted site.

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

回答by Eckonator

Here is my non SSL solution for Safari in 2017/05

这是我在 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();

The new part is this one in "case error.POSITION_UNAVAILABLE":

新部分是“case error.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;