没有 SSL 连接的地理位置

2023-04-20前端开发问题
33

本文介绍了没有 SSL 连接的地理位置的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

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

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.

  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.

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

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

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 上获取坐标/LatLong 值吗?[仅在不安全的连接上]

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

EDIT :它在我的机器上使用 localhost:80 工作,但在 http 上的测试 url 中不工作

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

推荐答案

var apiGeolocationSuccess = function(position) {
    alert("API geolocation success!

lat = " + position.coords.latitude + "
lng = " + 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! 

"+err);
  });
};

var browserGeolocationSuccess = function(position) {
    alert("Browser geolocation success!

lat = " + position.coords.latitude + "
lng = " + position.coords.longitude);
};

var browserGeolocationFail = function(error) {
  switch (error.code) {
    case error.TIMEOUT:
      alert("Browser geolocation error !

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

Position unavailable.");
      break;
  }
};

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

tryGeolocation();

这篇关于没有 SSL 连接的地理位置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

The End

相关推荐

layui 实现实时刷新一个外部的div
主页面上显示了一个合计,在删除和增加的时候需要更改这个总套数的值: //html代码div class="layui-inline layui-show-xs-block" style="margin-left: 10px" id="sumDiv"spanSOP合计:/spanspan${totalNum}/spanspan套/span/div 于是在我们删除这个条数据后,...
2024-11-14 前端开发问题
156

layui要如何改变时间日历布局大小?
问题描述 我想改变layui时间日历布局大小,这个要怎么操作呢? 解决办法 可以用css样式对时间日历进行重新布局,具体代码如下: !DOCTYPE htmlhtmlheadmeta charset="UTF-8"title/titlelink rel="stylesheet" href="../../layui/css/layui.css" /style#test-...
2024-10-24 前端开发问题
271

jQuery怎么动态向页面添加代码?
append() 方法在被选元素的结尾(仍然在内部)插入指定内容。 语法: $(selector).append( content ) var creatPrintList = function(data){ var innerHtml = ""; for(var i =0;i data.length;i++){ innerHtml +="li class='contentLi'"; innerHtml +="a href...
2024-10-18 前端开发问题
125

“数组中的每个孩子都应该有一个唯一的 key prop"仅在第一次呈现页面时
quot;Each child in an array should have a unique key propquot; only on first time render of page(“数组中的每个孩子都应该有一个唯一的 key prop仅在第一次呈现页面时)...
2024-04-20 前端开发问题
5

CoffeeScript 总是以匿名函数返回
CoffeeScript always returns in anonymous function(CoffeeScript 总是以匿名函数返回)...
2024-04-20 前端开发问题
13

getFullYear 在一年的第一天返回前一年
getFullYear returns year before on first day of year(getFullYear 在一年的第一天返回前一年)...
2024-04-20 前端开发问题
6