打卡功能从分析到实现，地理围栏，gps定位，百度地图定位 |
您所在的位置：网站首页 › 固定位置打卡 › 打卡功能从分析到实现，地理围栏，gps定位，百度地图定位 |
|
一，需求分析
从思路分析，给定一个固定的打卡地点，绑定一个事件，触发打卡。 首先，你需要查阅地图，对经纬度有一定的了解，才方便以下操作。 获取你自身的位置，获取固定打卡地点。地理围栏简单的理解就是判断点是否在圆圈内。如何知道自身以及打卡地点的准确位置（误差不是很大），对比自身位置到打卡地点的距离，进行判断。 二，了解额外的知识比如上面描述的经纬度概念，其次，说起定位，肯定第一时间去找百度地图，高德地图，腾讯地图等等。 百度地图和高德地图都有各自的API，相信大家可以好好看看，我在这里只是简单地应用，举例为百度地图。 H5有查询地理位置的API，可以获取到自身的经纬度。我们在百度地图上可以找到自己的位置，但是H5获取的经纬度放在百度地图上 坐标反查 却有很大的 误差，因为什么呢。 因为坐标系不一样，我们自己获取的坐标系是 火星坐标系 ！ 百度坐标系上面是 把火星坐标系 经过一套算法（不知）加密而得到的 坐标系 ，那么我们应该怎么做呢。百度地图 有自己的 API ，坐标转换， 可以把其他的坐标系转化为 百度坐标。 把转化的坐标在坐标反查中的定位就很准确了，定位的误差也会很大的减少。 三，代码实现点击按钮获取您当前坐标（可能需要比较长的时间获取）： 点击打卡 //获取到自身经纬度 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 + // "经度: " + 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) } }) }得到了 自己 在百度地图上的经纬度，再进行下一步 四，计算距离借助百度地图API，提供了计算两个地点，经纬度距离的计算公式，带入就得到 距离，误差是有的，不会太大，亲测。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |