小程序之定位签到打卡=＞腾讯地图SDK-Toy模板网

这篇具有很好参考价值的文章主要介绍了小程序之定位签到打卡=＞腾讯地图SDK。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

说明:文章部分内容及图片出自网络，如有侵权请与我本人联系(主页有公众号:小攻城狮学前端)

作者：小只前端攻城狮、
主页：小只前端攻城狮、
首发：掘金

GitHub：P-J27、
CSDN：PJ想做前端攻城狮

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

引言

这是在我做毕设时，涉及到的一个功能点，在小程序上做定位签到打卡。这里把如何实现给大家分享一下。有做过wx小程序应该都知道，官方文档说的话==没说。如果有人以后需要做类似的功能，希望有帮助。避免在官方文档上浪费大把时间。

小程序之定位签到打卡=＞腾讯地图SDK

核心步骤

获得用户定位权限，获得当前定位的经纬度。
- 这里直接利用wx.getLocation API方法获取用户当前位置的经纬度。（这个很简单，文档定位链接
  
  对于有上线需求的hxd一定要看下面这张图。记得去申请，不然你发现本地测试好好的，上线后功能就不能用了。

拿到经纬度之后，就需要逆地址解析了（不可能给用户看一个经纬度吧，需要转出具体地名）。我这里用的腾讯地图的SDK。官方文档定位

进入这个文档首先注册一个账号。有了账号才能下一步。

申请密钥，创建应用。
开通webserviceAPI服务：控制台->应用管理->我的应用->添加key->勾选WebServiceAPI -> 保存。（appid就是你的appid）
下载sdk包 1.1版本下载地址一般1.1就是我们用的，当然看自己需求。下载解压后放到项目下，哪个目录看自己，只要能引用就行
安全域名设置，在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名，添加https://apis.map.qq.com 添加后在开发中工具上记得刷新域名，或者你清理缓存重启工具也行

然后就是写代码了。官网文档没讲很清楚。我贴上我的代码做参考

逆地址解析返回结果字段对称表

先要在app.json配置以下信息才能正常使用，配置授权的提示文本

{
	"permission": {
        "scope.userLocation": {
            "desc": "你的位置信息将用于小程序位置接口的效果展示"
        }
    }
}

页面代码page.js

var QQMapWX = require('../../../qqmap-wx-jssdk1/qqmap-wx-jssdk.js');
// 实例化API核心类
var qqmapsdk = new QQMapWX({
  key: '你申请的key'
});
const app = getApp()
const db = wx.cloud.database()
const _ = db.command;
Page({
  data: {},
  onLoad: function (options) {
      wx.getLocation({
          type: 'gcj02', //返回可以用于wx.openLocation的经纬度
          isHighAccuracy: true, // 开启地图精准定位
      }).then(res => {
          //逆地址
          qqmapsdk.reverseGeocoder({
              location: res,
              success: (r) => {
                  //r里面就是你需要的地址信息了。
                  //具体字段对应的内容 我上面给出地址了
              }
          })
      }).catch(() => {
          wx.showToast({
              title: '请授权定位信息并且打开手机定位',
              icon: 'none'
          })
      })
  },
})