打卡功能从分析到实现，地理围栏，gps定位，百度地图定位

最新推荐文章于 2023-11-06 17:24:10 发布

Evonliyo

最新推荐文章于 2023-11-06 17:24:10 发布

阅读量2.8k

点赞数

分类专栏：前端文章标签：百度定位百度api h5 地理围栏百度定位误差

本文链接：https://blog.csdn.net/weixin_44241233/article/details/99319741

版权

前端专栏收录该内容

23 篇文章

订阅专栏

一，需求分析

从思路分析，给定一个固定的打卡地点，绑定一个事件，触发打卡。

首先，你需要查阅地图，对经纬度有一定的了解，才方便以下操作。

获取你自身的位置，获取固定打卡地点。地理围栏简单的理解就是判断点是否在圆圈内。
如何知道自身以及打卡地点的准确位置（误差不是很大），
对比自身位置到打卡地点的距离，进行判断。

二，了解额外的知识

比如上面描述的经纬度概念，其次，说起定位，肯定第一时间去找百度地图，高德地图，腾讯地图等等。

百度地图和高德地图都有各自的API，相信大家可以好好看看，我在这里只是简单地应用，举例为百度地图。

H5有查询地理位置的API，可以获取到自身的经纬度。我们在百度地图上可以找到自己的位置，但是H5获取的经纬度放在百度地图上坐标反查却有很大的误差，因为什么呢。

因为坐标系不一样，我们自己获取的坐标系是火星坐标系！百度坐标系上面是把火星坐标系经过一套算法（不知）加密而得到的坐标系，那么我们应该怎么做呢。百度地图有自己的 API ，坐标转换，可以把其他的坐标系转化为百度坐标。把转化的坐标在坐标反查中的定位就很准确了，定位的误差也会很大的减少。

三，代码实现

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你申请的密钥"></script>

<body>
			<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
			<button onclick="getLocation()">点击打卡</button>
		</body>
		<script type="text/javascript">
			//获取到自身经纬度
			var x = document.getElementById("demo");

			function getLocation() {
				if(navigator.geolocation) {
					navigator.geolocation.getCurrentPosition(showPosition);
				} else {
					x.innerHTML = "该浏览器不支持获取地理位置。";
				}
			}

			function showPosition(position) {
				//			x.innerHTML = "纬度: " + position.coords.latitude +
				//				"<br>经度: " + position.coords.longitude;
				$.get({
					url: 'http://api.map.baidu.com/geoconv/v1/?coords=' + position.coords.longitude + ',' + position.coords.latitude + '&from=1&to=5&ak=你申请的密钥',
					type: 'get',
					dataType: 'jsonp',
					jsonp: 'callback',
					jsonpCallback: 'callback',
					contentType: 'application/json;charset=utf-8',
					success: function(result) {
						//得到的百度地图
//						alert(result.result[0].x + ',' + result.result[0].y) 
						var bd_lng = result.result[0].x;//获得自身所处位置的经度
						var bd_lat = result.result[0].y;//获得自身所处位置的纬度
						alert(bd_lng+','+bd_lat)
					},
					error: function(err) {
						//				console.log(err)
					}
				})

			}
		</script>

得到了自己在百度地图上的经纬度，再进行下一步