【腾讯地图】纯手写微信定位考勤小程序，内附完整源码！
本文主要分为四部分：
- 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 = 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代码.
【腾讯地图】纯手写微信定位考勤小程序，内附完整源码！相关推荐
- 手写微信外卖cps小程序
年末,公司活不多了,就搞了一个外卖cps的小程序,一方面是最近刚学了小程序开发,上上手,另一方面平时点个外卖方便领券. 小程序环境 我是用的阿里云服务器做的环境,因为小程序访问接口必须是https认证 ...
- [内附完整源码和文档] 基于Android的移动手机端五子棋游戏APP的设计与实现
一.项目概述 近年来,随着安卓手机的普及,安卓游戏成为广大用户关注的方向.五子棋作为一个棋类竞技运动,在民间十分流行,为了熟悉五子棋规则及技巧,以及研究简单的人工智能,决定用Java开发五子棋游戏,主 ...
- 基于微信奶茶外卖小程序商城毕业设计 毕设源码 开题报告参考
- 基于olami开放语义平台的微信小程序遥知之源码实现
概述 实现一个智能生活信息查询的小秘书功能,支持查天气.新闻.日历.汇率.笑话.故事.百科.诗词.邮编.区号.菜谱.股票.节目预告,还支持闲聊.算24点.数学计算.单位换算.购物.搜索等功能. 使用方 ...
- 微信小程序之授权登录（附完整源码）
个人博客上已经同步更新了文章,有目录索引,阅读起来比较方便,欢迎大家移步个人博客上读阅~ 个人博客地址:http://zwd596257180.gitee.io/blog/2019/04/15/wec ...
- 微信小程序盲盒系统源码 附带教程
微信小程序盲盒系统源码 可对接微信支付 附带教程 盲盒小程序的教学 服务器安装宝塔面板 设置好网站 数据库 设置好SSL证书 上传微擎框架 框架安装好 上传小程序后台 /addons 这个目录是放置后 ...
- 微信小程序宠物商城项目源码来了~
微信小程序蒙服汇项目源码来了~ 微信小程序垃圾分类项目源码来了~ 微信小程序校园社团管理系统项目源码来了~ 团队承接各类小程序定制,需要加微 code_gg_boy .小商城,购物,公司的一些管理,流 ...
- 闲来无事，用java写了一个魔方小程序。附源码
闲来无事,用java写了一个魔方小程序.附源码 使用三维数组.相对来说还是简单.呵呵. import java.util.ArrayList; import java.util.List; impor ...
- java实现魔方_闲来无事，用java写了一个魔方小程序。附源码 | 学步园
闲来无事,用java写了一个魔方小程序.附源码 使用三维数组.相对来说还是简单.呵呵. import java.util.ArrayList; import java.util.List; impor ...
- 一款基于微信的小程序电商系统源码（前端+后台）带文字安装教程
小程序电商系统源码(前端+后台)带文字安装教程 运行环境 服务器宝塔面板 PHP 5.6 Mysql 5.5及以上版本 Linux Centos7以上 系统介绍: 1.一款基于微信的小程序电商系统,是 ...
最新文章
- JavaScript实现私有属性
- IOS设计模式的六大设计原则之开放-关闭原则(OCP,Open-Close Principle)
- 国人主导研发的 HAWQ® 成 Apache® 顶级项目
- 【NLP】Contrastive Learning NLP Papers
- 禁用ohmyzsh自动更新
- Python3.6字符串新特性
- pr用什么显卡比较好_学ps pr ae用什么电脑比较好？有什么配置要求？
- 管家婆mysql 数据库_Java数据库小项目02--管家婆项目
- CentOS 7 下配置ip forward(虚拟路由器)
- html 在线测试 鱼缸,研究员试图用AR鱼缸欺骗鱼的感官系统，结果反被鱼识破
- 60位移动游戏大佬共同发起成立“上方汇”
- 2022-10-17 环境映射
- js如何调用电脑的摄像头
- 联想手机鸿蒙刷机包,联想手机刷机教程 卡刷
- 1009 说反话 (20分)快速易理解C++版
- 1014 福尔摩斯的约会（python）
- 【C】echo命令的实现
- 2021 年 Q4 随笔
- 包头钢铁职业技术学院题库计算机,计算机-包头钢铁职业技术学院.DOC
- hytra mysql_PHPYUN人才招聘系统v5.0.1beta PHP云人才系统 - 下载 - 搜珍网