Android 开源 员工定位打卡

---

本文主要分为四部分：

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

---

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

第一步 注册

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

https://lbs.qq.com?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.js
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js')  //引入获得地址的js文件
var qqmapsdk;

2 位置获取方法

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

getLocation() {
    var that = this
    wx.getLocation({ //调用API得到经纬度
      type: 'wgs84',
      success: function(res) {
        var speed = res.speed
        var accuracy = res.accuracy
        var latitude = res.latitude
        var longitude = res.longitude

        that.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 = this
        wx.getLocation({
          type: 'wgs84', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
          success: function (res) {
            console.log(res)
            that.setData({
              longitude: res.longitude,
              latitude: res.latitude
            })
          }
    　})
  }

说明：

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

---

四、源码下载

微信小程序下载地址：
微信小程序代码.后端JAVA代码.