html5实现定位签到,H5+百度地图实现移动端考勤定位打卡

H5+百度地图实现考勤定位打卡

html页面引入百度地图 (记得更改密钥)

确保线上服务为https协议

案例代码

const {BMap,BMAP_STATUS_SUCCESS,BMAP_ANCHOR_TOP_LEFT}=window;

// 定位

const _$that = this;

const map = this.map;

// 第一次绘制

// 创建新的标注开始

var pt2 = new BMap.Point(r.point.lng , r.point.lat );

var myIcon2 = new BMap.Icon(MyposImg, new BMap.Size(42,53));

var marker2 = new BMap.Marker(pt2,{icon:myIcon2}); // 创建标注

marker2.setTop(true,27000000);

map.addOverlay(marker2);

var points = [{"lng":actAttendanceInfo.jd,"lat":actAttendanceInfo.wd,"status":1,"id":50},

{"lng":r.point.lng,"lat":r.point.lat,"status":1,"id":5}

];

var view = map.getViewport(eval(points));

var mapZoom = view.zoom;

var centerPoint = view.center;

map.centerAndZoom(centerPoint,mapZoom);

// 使用经纬度换取位置信息

var geoc = new BMap.Geocoder();

geoc.getLocation(pt2, function(posrs){

_$that.setState({

myaddress: posrs.address,

mypoint:r.point,

},()=>{

// 计算是否在考勤范围内

var pointB = new BMap.Point(actAttendanceInfo.jd,actAttendanceInfo.wd); // 活动地点位置

let curDistance = (map.getDistance(pt2,pointB)).toFixed(2);

// console.log('距离是：',curDistance,); //获取两点距离,保留小数点后两位

if(Number(curDistance) <= Number(actAttendanceInfo.range)){

// console.log('在考勤范围内')

_$that.setState({

inrange:true,

})

}else{

// console.log('不在考勤范围内')

_$that.setState({

inrange:false,

})

}

// 开启定时器 10s 获取一次位置

})

});

// 创建新的标注结束

}

},{provider:'baidu'})

html5实现定位签到,H5+百度地图实现移动端考勤定位打卡相关推荐

php百度地图定位到街道,百度地图拖动标注输出当前定位坐标及街道信息
百度地图Demo var map = new BMap.Map("container");//初始化地图 map.addControl(new BMap.NavigationCon ...
微信H5页面嵌入百度地图---解决手机的webKit定位，ios系统对非https网站不提供支持问题
微信H5页面嵌入百度地图---解决手机的webKit定位,ios系统对非https网站不提供支持问题参考文章: (1)微信H5页面嵌入百度地图---解决手机的webKit定位,ios系统对非http ...
navigator.geolocation的应用 - 将定位信息显示在百度地图上
在学习navigator.geolocation的时候,有一个实例是获取坐标后显示在谷歌地图上.众所周知,谷歌地图国内并不能直接访问,得用特殊手段,那我要测试的时候还要开着梯子挺麻烦的,想给别人用也得 ...
android 百度地图闪退,Android使用百度地图出现闪退及定位时显示蓝屏问题的解决方法...
使用百度地图出现闪退一般情况下出现闪退是在AndroidManifest.xml文件中未在application标签中配置 android:name="com.baidu.lbsapi.A ...
关于百度地图js api的getCurrentPosition定位不准确的解决方法
关于百度地图js api的getCurrentPosition定位不准确的解决方法参考文章: (1)关于百度地图js api的getCurrentPosition定位不准确的解决方法 (2)http ...
百度地图查找我的位置定位服务器,百度地图手机版如何进行我的位置定位？
不知大家有没有使用过百度地图手机版我的位置定位功能?百度地图的位置定位功能很不错,我的位置定位让我们随时分享位置信息,可以通过这个位置定位功能让其他的好友都知道我们的具体所在位置,真是一个很实用的功能 ...
百度地图实现公司位置的定位，可拖动修改公司位置。
百度地图实现公司位置的定位,可拖动修改公司位置.只需要维护x轴和Y轴的数据到数据库就可以了可拖动,可搜索. <html><head><script src=" ...
js 实现精准定位（使用百度地图API）
获取定位城市使用百度地图API时记得申请AK 使用步骤如下 1.0 引用 <script type="text/javascript" src="http://a ...
记录一下在浏览器端利用微信地图定位接口和百度地图定位接口实现高精度定位的开发心得
地图定位是一个很要命的问题,目测下来在手机浏览器端基于微信生态的定位接口要精准情况好过直接用百度 LBS 等地图定位.百度地图好处是未获取到坐标会按 IP 走定位. 业务背景:后台通过百度地图拾取坐标 ...

html5实现定位签到,H5+百度地图实现移动端考勤定位打卡

html5实现定位签到,H5+百度地图实现移动端考勤定位打卡相关推荐

最新文章

热门文章