记一次难忘的JS获取用户位置信息的问题及解决方法

最新推荐文章于 2024-09-07 21:10:16 发布

梦想编程家

最新推荐文章于 2024-09-07 21:10:16 发布

阅读量1.2k

点赞数 21

分类专栏：梦想编程家的记录文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_41560688/article/details/136098474

版权

梦想编程家的记录专栏收录该内容

1 篇文章 0 订阅

订阅专栏

写在最前

浏览器定位需要使用高德、腾讯、百度等JS地图API辅助定位，个人认为整精度高德＞腾讯＞百度，稳定性百度＞高德≈腾讯，只用原生方法稳定性极差。另外WebApp开发请尽可能使用系统方法调用，而不要套JS，非常容易遇到众所周知的问题导致调用失败（高德腾讯均失败，百度定位偏移超过10Km，严重怀疑是IP算的）。

背景

业务需求，需要通过浏览器获取用户当前所在位置geo_code并使用地图API进行逆地理编码

【步骤】首先考虑使用H5原生定位方法获取用户定位。原生代码如下：

if(navigator.geolocation) {  
    navigator.geolocation.getCurrentPosition(function(position) {  
        let lon = position.coords.longitude.toFixed(6); 
        let lat = position.coords.latitude.toFixed(6);  

        // 由于API普遍限制精度，精确到小数点后6位
        // 这里将获取的坐标传递到后端或完成前端input.value赋值。lon在前，lat在后

    }, function(error) {  
        alert(error.message);
        // console.log("[ERROR] [navigator] 发生错误，代码为：" + error.code);  
        // error.code can be:
        // -1 不支持 
        // 0: 未知错误  
        // 1: 用户拒绝授权
        // 2: 超时响应
        // 3: 没有来自位置程序的数据  
        return false;
    });  
} else {  
    alert("您的浏览器不支持使用HTML5来获取地理位置服务");  
}

问题1：原生定位在开发环境的电脑定位正常，手机使用内网穿透访问定位正常，部署服务器环境后手机电脑均失效

【详细描述】原生谷歌定位在开发环境本地127的自定义端口定位正常，环境开启了代理，手机访问使用内网穿透的网址接收到网页定位授权请求，定位正常。当部署业务后，在公网访问，授权后电脑手机均未能成功定位。电脑浏览器Chrome，手机小米浏览器。

【问题解决】查看输出发现谷歌目前强制要求使用https，之前部署的http不能正常请求到位置信息。故需要升级为https。

首先需要对自己所有的域名注册商（阿里云、腾讯云等）搜索SSL，免费获取SSL证书，并根据自己的服务器下载对应的证书和KEY，并正确配置。尽可能不要给后端直接配置，比如django实现附加SSL启动，一方面版本问题很容易出错，需要回滚到py3.9环境才能支持一些依赖安装（也有可能是本人项目模块的问题，没有细究）配置完成后要正确映射服务器软件和后端。

安装后发现谷歌浏览器还是不能正确访问，考虑到了谷歌问题，查询后发现确有此事。

参考：http://t.csdnimg.cn/UwkKC

谷歌--高德地图定位失败geolocation time out @小阳生煎

故弃用原生定位，使用csdn地图API来定位。

给出高德的示例，其它两个类似：

// 放在head里
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你自己官网申请的KEY"></script>


// 放在body里
<div id='test'></div>
<div id='container'></div>


<script>
	var test = document.getElementById('test');
	var map = new AMap.Map('container', {
	  resizeEnable: true
	});
	AMap.plugin('AMap.Geolocation', function() {
	  var geolocation = new AMap.Geolocation({
	      enableHighAccuracy: true,             //是否使用高精度定位
	      timeout: 10000,          	            //超过10秒后停止定位
	      buttonPosition:'RB',    	            //定位按钮的停靠位置
	      buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量
	      zoomToAccuracy: true,   	            //定位成功后是否自动调整地图视野到定位点
	  });
	  map.addControl(geolocation);
	  geolocation.getCurrentPosition(function(status,result){
	      if(status=='complete'){
	          onComplete(result);
	      }else{
	          onError(result);
	      }
	  });
	});

	// 成功逻辑
	function onComplete(data) {
	  test.innerHTML = data.position;
	}

	// 失败逻辑
	function onError(data) {
	  alert('失败原因:'+data.message);
	}
</script>

之后使用API可以满足大部分浏览器直接访问场景问题，如果还是有问题，可以备用几个地图API调用。