【腾讯地图】纯手写微信定位考勤小程序 内附完整源码！

本文主要分为四部分：

1、腾讯定位服务的注册和使用2、小程序的整体框架结构介绍3、小程序集成腾讯定位服务开发说明4、源码下载

一、腾讯定位服务的注册和使用

第一步 注册

【点击】腾讯位置服务链接进行注册，如果注册过，也可点下面链接进行登录使用

?lbs_invite=ATLEFLA

1 点击最右上角注册或登录

2 输入手机号获取验证码进行注册即可

第二步 创建一个key

不要被注册后酷炫的页面所迷惑！如下图所示操作！

第三步 保存创建好的key ，切莫泄露给其他人！

这是我创建好的，供各位大佬鉴赏！就是这个模样

记住创建好的key，不要告诉任何人，以免别人拿你的key干坏事！

二、小程序的整体框架结构介绍

1、开发工具及开发环境

如下所示：Tomcat 7 JDK7+ Eclipse Mysql 5.6+ 微信小程序开发工具

2、Java后端代码结构

说明如下：

controller 控制层dao 数据处理interfa 接口service 服务层utils 公共方法

3、小程序结构

3、小程序功能展示

主要功能：

1 可以创建团队，新建成员

2 对团队中人员进行管理（这里人员都是小程序使用用户）

3 考勤设置这里是对考勤地址的设置

4 考勤审批，主要针对打开时间不正确、或者定位不准等情况

三、小程序集成腾讯定位服务开发说明

1 开发注意事项

需要引入地图脚本：qqmap-wx-jssdk.js （本文引入放在utils中）

需要具体js中Page最上面引入js

//index.jsvar QQMapWX = require('../../utils/qqmap-wx-jssdk.js') //引入获得地址的js文件var qqmapsdk;

2 位置获取方法

此方法路径：index目录中index.js文件

getLocation() {var that = thiswx.getLocation({//调用API得到经纬度type: 'wgs84',success: function(res) {var speed = res.speedvar accuracy = res.accuracyvar latitude = res.latitudevar longitude = res.longitudethat.setData({latitude: res.latitude,longitude: res.longitude,markers: [{latitude: latitude,longitude: longitude,iconPath: '/images/icon_mark.png',title: '定位地点！',width: 30,height: 30}]})//地址解析var demo = new QQMapWX({// 这个KEY的获取方式在上面链接 //腾讯位置服务的开发文档中有详细的申请密钥步骤key: 'YUVBZ-XXXXX-XXXXX-XXXXX-XXXXX-DTB4E' });demo.reverseGeocoder({//地址解析location: {latitude: latitude,longitude: longitude},success: function(res) {console.log(res);//获得地址that.setData({address: res.result.address})},fail: function(res) {console.log(res);},complete: function(res) {console.log(res);}});}})},

此代码片段为index目录中local.js文件

getLocation: function (e) {console.log(e)var that = thiswx.getLocation({type: 'wgs84', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标success: function (res) {console.log(res)that.setData({longitude: res.longitude,latitude: res.latitude})}})}

说明：

由于篇幅原因，我这里简单介绍了一下，如果大家对这个具体实现细节感兴趣，欢迎留言讨论，或者关注我其它的文章。如果感兴趣的人多，我会出一套手把手微信小程序开发入门实践的教程，一系列。

四、源码下载

微信小程序下载地址：

微信小程序代码.

后端JAVA代码.