如何通过检测移动位置是否进入设定区域实现签到考勤功能
添加的cordova插件:cordova plugin add cordova-plugin-geolocation,获取设备位置信息。也可直接采用HTML5自带功能。
一、注册百度账号并获取密钥
在html中采用<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=密钥">
在这里插入代码片
导入<script type="text/javascript" src="js/api.map.baidu.js"></script>
来通过百度地图坐标系统获取,在(http://api.map.baidu.com/lbsapi/getpoint/index.html)中下载
二、HTML文件代码
- 代码为:
<div><a href="" data-icon="refresh" id="refresh">开始模拟</a> </div>
<div id="map"></div>
三、js文件代码
- 代码为:
document.addEventListener("deviceready", onDeviceReady);
function onDeviceReady() {
console.log("ready...");
setMapSize();//设置装载地图的div尺寸
loadMap();//装载地图
addMapControl()//添加控件
getPosition();//使用H5或插件取得当前位置
//getPositionByBaidu();//使用百度定位对象获取当前位置
drawPolygon();//在百度地图绘制多边形
buttonClick();//点击按钮,模拟当前移动位置是否进入设置区域
}
/* win10中 直接在浏览器中测试
$(document).ready(function () {
setMapSize();//设置装载地图的div尺寸
loadMap();//装载地图
getPosition();//使用H5或插件取得当前位置
//getPositionByBaidu();//使用百度定位对象获取当前位置
drawPolygon();//在百度地图绘制多边形
buttonClick();//点击按钮,模拟当前移动位置是否进入设置区域
});
*/
function setMapSize() {
console.log("setMapSize.ok...");
var wh = $(window).height();//获取屏幕高度
var hh = $("[data-role='header']").height();//使用属性选择器获取标题栏的高度
var bh = $("[data-role='footer']").height();//获取底部栏的高度
var h = wh - hh - bh;
$("#map").height(h);//设置div高度
}
var bmap = null;//因为在其他函数要使用,将其定义为全局变量
function loadMap() {
console.log("loadMap.ok...");
var point = new BMap.Point(113.485813, 23.106937);//创建地图中心的做坐标点
bmap = new BMap.Map("map");//创建百度地图对象,参数为页面中id=map的div
bmap.centerAndZoom(point, 18);//指定当前显示的中心点,并设置地图的放大等级
bmap.enableScrollWheelZoom();//设置能够通过鼠标滚轮缩放地图,在移动设备为双击放大。
}
function getPosition() {
console.log("getPosition.ok...");
var opts = { enableHighAccuracy: true, timeout: 10000, maximuAge: 0 };
//属性含义;使用高精度;如果10秒获取不到数据,则失败;每次获取最新数据,而不是上一次的缓存数据
navigator.geolocation.getCurrentPosition(onsuccess, onerror, opts);
//成功获取位置信息后,取得代表当前位置的经纬度,调用translate函数转换为百度坐标
function onsuccess(pos) {
console.log("ok...");
var lng = pos.coords.longitude;//经度
var lat = pos.coords.latitude;//纬度
translate(lng, lat, 1);// 自定义函数,将GSP坐标转换为百度坐标;code为坐标代码1-5
}
//如果在指定的时间内获取不到位置信息,则显示错误信息。
function onerror(err) { console.log(JSON.stringify(err)); }//可以查看pos包含哪些属性
}
function translate(lng, lat, code) {
console.log("translate.ok...");
var points = [];
points[0] = new BMap.Point(lng, lat);
//将坐标包装为百度的point类型,其结果为:{lng:值,lat:值} JSON格式
//由于转换方法可以转换一组(不超过10个)坐标,因此采用数组,但这里仅仅使用到一个坐标元素。
var trans = new BMap.Convertor();//创建百度的坐标转换对象
trans.translate(points, code, 5, function (data) { //转换成功后,标注位置
var point = data.points[0];//数组只有一个坐标元素
var mk = new BMap.Marker(point);
bmap.addOverlay(mk);//添加标注
bmap.setCenter(point);//重新设置中心点
});
}
function getPositionByBaidu() {
console.log("getPositionByBaidu.ok...");
var opts = { enableHighAccuracy: true, timeout: 10000, maximuAge: 0 };
//属性含义;使用高精度;如果10秒获取不到数据,则失败;每次获取最新数据,而不是上一次的缓存数据
var geo = new BMap.Geolocation();
geo.getCurrentPosition(onsuccess, opts);
//执行成功,传递pos参数
function onsuccess(pos) {
console.log("ok...");
alert("pos的属性有:" + JSON.stringify(pos));//可以查看pos包含哪些属性
var point = pos.point;//经纬度 ,包含属性名:lng和lat
bmap.setCenter(point);
var mk = new BMap.Marker(point);
bmap.addOverlay(mk);//添加标注:覆盖层
bmap.setCenter(point);//重新设置中心点
}
}
var ps = null;//多边形点数组,使用坐标系统逐点获取
function drawPolygon() {
console.log("drawPolygon.ok...");
// 参数1:构成多边形的坐标点
ps = [
new BMap.Point(113.485494, 23.107399),
new BMap.Point(113.485471, 23.107187),
new BMap.Point(113.485444, 23.106846),
new BMap.Point(113.486064, 23.106821),
new BMap.Point(113.48614, 23.107303),
new BMap.Point(113.48575, 23.107386)
];
//参数2:绘制多边形样式,参考文档:粗细、颜色、线型、透明度
var opts = { strokeWeight: "6", strokeColor: "blue", strokeStyle: "solid", strokeOpacity: 0.5 };
shape = new BMap.Polygon(ps, opts);//创建多边形对象
bmap.addOverlay(shape);//绘制:作为覆盖层 添加到地图
}
function buttonClick() {
console.log("buttonClick.ok...");
$("#refresh").click(function () {
//多边形区域坐标
ps = [//自己定义当前位置附近
new BMap.Point(113.485494, 23.107399),
new BMap.Point(113.485471, 23.107187),
new BMap.Point(113.485444, 23.106846),
new BMap.Point(113.486064, 23.106821),
new BMap.Point(113.48614, 23.107303),
new BMap.Point(113.48575, 23.107386)
];
var polygon = new BMap.Polygon(ps);//创建多边形对象
//行走坐标
var points = [//自己定义模拟
new BMap.Point(113.484905, 23.107261),
new BMap.Point(113.484865, 23.107095),
new BMap.Point(113.484896, 23.106879),
new BMap.Point(113.485467, 23.107008),
new BMap.Point(113.485584, 23.107004),
new BMap.Point(113.485844, 23.106917)
];
var mpoints=[];//创建存放我的路程坐标
var index = 0;
var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
scale: 0.5,//图标缩放大小
strokeColor:'#fff',//设置矢量图标的线填充颜色
strokeWeight: '2',//设置线宽
});
var icons = new BMap.IconSequence(sy, '10', '30');
tid = setInterval(function () {
console.log("setInterval.ok...");
var mk = new BMap.Marker(points[index]);
bmap.addOverlay(mk);//标注 主要演示效果,实际不需要
mpoints[index]=points[index];//存放路程坐标
var bol = chkPoint(points[index], polygon);//判断
if (bol) { clearInterval(tid);
var polyline =new BMap.Polyline(mpoints, {
enableEditing: false,//是否启用线编辑,默认为false
enableClicking: true,//是否响应点击事件,默认为true
icons:[icons],
strokeWeight:'10',//折线的宽度,以像素为单位
strokeOpacity: 0.8,//折线的透明度,取值范围0 - 1
strokeColor:"#18a45b" //折线颜色
});
bmap.addOverlay(polyline); //增加折线
alert("已成功打卡!"); } //清除定时器
index++;
if (index >= points.length) { clearInterval(tid); alert("不在区域内!"); }
console.log(JSON.stringify(points[index]));
}
, 1000);
});
}
function chkPoint(point, polygon) {
console.log("chkPoint.ok...");
var bol = BMapLib.GeoUtils.isPointInPolygon(point, polygon);
return bol;//返回值为true 则位于多边形区域内。
}
function addMapControl(){
console.log("addMapControl.ok...");
bmap.addControl(new BMap.NavigationControl({
//type: BMAP_NAVIGATION_CONTROL_LARGE, //表示显示完整的平移缩放控件。
//type: BMAP_NAVIGATION_CONTROL_SMALL, //表示显示小型的平移缩放控件。
//type: BMAP_NAVIGATION_CONTROL_PAN, //表示只显示控件的平移部分功能。
//type: BMAP_NAVIGATION_CONTROL_ZOOM, //表示只显示控件的缩放部分功能。
anchor: BMAP_ANCHOR_TOP_LEFT, //表示控件定位于地图的左上角。
//anchor: BMAP_ANCHOR_TOP_RIGHT, //表示控件定位于地图的右上角。
//anchor: BMAP_ANCHOR_BOTTOM_LEFT, //表示控件定位于地图的左下角。
//anchor: BMAP_ANCHOR_BOTTOM_RIGHT, //表示控件定位于地图的右下角。
})); //设置地图平移缩放控件,PC端默认位于地图左上方type控件外观,anchor控件的停靠位置,offset偏移的位置
bmap.setCurrentCity("广州"); // 仅当设置城市信息时,MapTypeControl的切换功能才能可用
bmap.addControl(new BMap.MapTypeControl({
//type: BMAP_MAPTYPE_CONTROL_HORIZONTAL,//按钮水平方式展示,默认采用此类型展示。
//type: BMAP_MAPTYPE_CONTROL_DROPDOWN,//按钮呈下拉列表方式展示。
//type: BMAP_MAPTYPE_CONTROL_MAP//以图片方式展示类型控件,设置该类型后无法指定maptypes属性。
mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP] }));
//设置地图类型控件,type控件样式,mapTypes控件展示的地图类型,默认为普通图、卫星图、卫星加路网混合图和三维图。通过此属性可配置控件展示的地图类型。
bmap.addControl(new BMap.OverviewMapControl({
isOpen: true,
anchor: BMAP_ANCHOR_BOTTOM_RIGHT
}));//设置地图类型控件缩略地图控件,默认位于地图右下方,isOpen缩略图是否隐藏
bmap.addControl(new BMap.ScaleControl());//设置比例尺控件
}