百度地图模拟签到考勤程序

如何通过检测移动位置是否进入设定区域实现签到考勤功能

添加的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());//设置比例尺控件
}