2020年第7期信息通信2020
(总第211期)INFORMATION&COMMUNICATIONS(Sum.No211)
WEB地图考勤系统的设计
郭星琪，郭琦
（西北民族大学数学与计算机科学学，甘肃兰州730106）
摘要：传统考勤方式往往存在浪费时间、效率低下、不好保存等缺点。本系统通过HTML5的地理定位、高德JsAP I技术设计并实现一款基于web的地图考勤系统，采用MySQL数据库进行持久化的存储数据，最终将直观的数据展现给教师。
关键词:Vue.js；跨域；高德地图JsAPI；考勤系统
中图分类号：TP311.52文献标识码:A文章编号：1673-1131（2019）07-0132-02
1系统背景
近年来，高校学生上课动力不足，经常会出现逃课、旷课的现象。当老师在课堂上点名的时候一部分人选
择让同学代答到的情况也屡试不爽，一个班的同学过多，老师们为了珍惜讲课时间，有时也无暇顾及。所以此时需要一个更完备的考勤系统，市面上的考勤系统比比皆是，但是实用程度都很一般。该系统通过高德地图的JsAPI与Vue.js搭建，实现了手机端（基于网页）考勤打卡功能，使上课考勤变得更加容易、方便。
JavaScript是一种轻量级的浏览器脚本语言，可以许多美观的网页效果。JS发展至今，己然成为最常用的网络脚本语言，而且其基于Nodejs技术可以进行服务器端编程，实现了前后端用同一种语言的可能，所以掌握JS这门语言是很必要的。但是原生JS的DOM操作代码复杂冗余、容易出错，此时使用一些比较流行的框架，如vue.js，可大大降低项目的开发难度以及降低代码的冗余度。
Vue.js是一套用于构建用户界面的渐进式框架，具有条理简洁清晰样例丰富直观的特点，对各个水平的国内开发者都相当友好叫Vue.js釆用的是MWM模型，这种模型本质上可以说是MVC模型的改进版，它拥有MVC框架的低耦合、可复用、独立开发等优点，也进行了更进一步的优化：双向绑定，这样开发者就不用在当数据发生变化时对view层进行数据更新，框架会自动帮我们完成。简言之,Vuejs是一个轻量级框架，通过尽可能简单的API实现数据的双向绑定，其核心是一个响应式的数据绑定系统。Vue作为目前市场上主流的三大前端框架（Angular.js、Vue.js和React.js）之一也是必须要学习和研究的，故该项目的研究动机明确。
总结来说就是传统考勤方式的缺点在于浪费时间、无法精确、有人代答等现象叫而本系统所要开发的考勤系统的设计通过H5自带的地理定位技术，配合上高德地图JsAPI 提供的地图及定位功能最终设计并实现一款WEB地图考勤系统。
2同源与跨域
要了解“跨域”的概念，就必须知道什么是“同源”。“同源”是目前所有浏览器都执行的一个政策，即网页A和网页B的“协议相同”、“域名相同”、“端口相同”，只要满足这三个“相同”，就能说明两个网页是“同源”的。而''跨域”刚好与同源相反，两个页面只要不是“同源”就称之为''跨域”。同源策略的目的是为了保证用户的信息安全，防止网站恶意窃取数据。虽然这些限制是有必要的，但是同时也会带来不利的影响。
在本系统中，由于需要引用高德地图JS API请求相关数据，所以不可避免的就要“跨域”请求数据。web开发中，前端向后端发送请求，大都采用AJAX方式叫而“跨域”往往会造成Cookie无法读取、DOM无法获得以及AJAX请求在浏览器端的限制，从而造成我们无法获取到所需数据。在JavaScript 中，我们可以使用jsonp进行跨域请求，其原理在于使用script 标签对服务器发送请求，服务器通过前端所发送的方法名进行方法调用，并将数据作为方法的参数传回。这样做虽然可以请求数据，但是本质上是get请求，所以发送的数据较小，且使用起来相对麻烦。另外可以使用CORS（跨域资源共享）进行跨域，这样的做法操作起来简单，只需要在服务器端做相应的设置即可。但是对于浏览器的版本有一定的要求，并不能很好的兼容低版本的浏览器。
3定位系统及系统实现思路
首先我们考虑使用百度地图的JSAPI，虽然通过百度地图进行定位稳定性提高了，但是通过API定位的位置与自身实际所处的位置总是出现差别，有时会达到几公里的差距，经过多次测试之后发现并没有发现实质上的解决方案，判断应该是其本身因素造成。最终系统选用了高德地图的JS APE
系统主要实现思路：通过高德JS API获取打卡用户当前所处地的经纬度，再获取考勤人所设置的考勤点（一般为考勤人所处地的经纬度），最终计算两点的距离是否处在合理的考勤范围内。
4使用高德地图JSAPI
高德地图JS API2.0是高德开放平台免费提供的第四代Web地图渲染引擎，以WebGL为主要绘图手段，本着"更轻、更快、更易用"的服务原则，广泛釆用了各种前沿技术，交互体验、视觉体验大幅提升，同时提供了众多新增能力和特性。它具有PC端、移动端完自动适配的特性，并且兼容IE9及以上的所有浏览器环境。
收稿日期：2020-06-12
基金项目：西北民族大学2020年本科生科研创新项目《基于Vue.js的地图考勤系统》；项目编号:XBMU-BYL20180。作者简介：郭星琪（2000-），女，山东荷泽人，学生，本科在读，研究方向：
信息与计算科学。
132
信息通信郭星琪等:WEB地图考勤系统的设计
下附有关高德地图JSAPI的相关重要代码:
图］初始化amap配置代码
图2浏览器加载初始化代码
有关高德地图JSAPI的一些注意事项：该接口定位时一般分为两种场景：移动端和PC，其中移动端包括手机,pad和其它带有GPS定位芯片的智能设备(如手表、音箱等)，移动端的系统包括iOS和Androido如果在移动端设备想要成功完成定位需要以下前提条件：
⑴系统GPS打开；
api设计
(2)所使用的App或浏览器已获取定位权限；
(3)对打开的页面允许使用定位；
(4)对于iOS10以上系统和Android的一些版本已禁止 在非HTTPS协议的域名下定位，请尽快将站点升级到HTTPS,
因此在页面上需要有足够的提示信息和相关的请求提示。
5系统其它功能说明
⑴登录退出
用户应先登录，在系统验证成功后，方可进入系统，并根据用户的身份(教师/学生)进入相应的用户界面；用户可在结束操作后退出系统。
⑵注册
用户在注册时应区分学生/教师身份，系统将该用户数据加入到相应的数据库表中。
(3)创建班级
教师可创建0个到n个班级，并为所创建班级的班主任；班主任可管理自己的班级，如解散班级、踢出学生等。
(4)加入班级
学生可加入0个到n个班级，并可主动退出所加入的班级。
(5)设置考勤点:
班主任在对应班级的页面内可以点击设置考勤点按键，将地图的考勤中心点设置为自身所在位置。并且可设置考勤范围(半径)，系统应给出默认的考勤范围。
(6)签到
在教室设置考勤点，并下达签到指令后，学生方可进行签到；系统应判断进行签到的学生是否在考勤范围内，以及在指定时间内未进行签到的学生，将未到名单反馈到教师的界面。
6结语
本文研究了基于web的地图考勤系统的搭建，通过高德JS AP搭建了一个快捷、准确且操作简单的考勤系统，当然此系统还有更多值得优化和提升的方面，研究团队也将从技术上、理论上完善该项目的建设。
参考文献：
［1］张柏林.Web地理定位考勤系统的设计与实现［J］.电脑编程技巧与维护,2018(08):148-150.
［2］沈剑翘，陈泽椿.We.js在构建系统前端SPA的应用［J］.科技创新与应用,2020(03):181-182.
⑶张新朝，霍冰鹏.基于AJAX的数据跨域传输技术分析［J］.
晋城职业技术学院学报,2020,13(02):7厶74.
图3解析定位结果、结算距离代码
133