个人技术总结——微信小程序实现地点定位

222100207王科竣 2024-06-04 01:01:38

这个作业属于哪个课程	福州大学-2302软件工程
这个作业要求在哪里	软件工程实践总结&个人技术博客
这个作业的目标	进行课程回顾与总结，与个人技术总结
其他参考文献	《构建之法》

一、技术概述

在进行软件工程实践作业时，我负责在微信小程序上实现地点定位签到，并且通过腾讯地图的逆解析拿到详细地址。难点主要在于，腾讯位置服务注册获取key，以及计算位置距离。

二、技术详述

开通服务

1.于小程序开发者平台->开发工具->腾讯位置服务开通服务，进入腾讯位置服务注册获取key。

2.注册腾讯位置服务账号后，开通webserviceAPI服务：控制台->应用管理->我的应用->添加key->勾选WebServiceAPI。

3.下载腾讯地图SDK包

腾讯地图SDK包链接

具体使用

1.在小程序的《开发管理-域名服务器》中的request合法域名中添加：https://apis.map.qq.com/

2.在app.json配置配置授权的提示文本

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

3.在页面代码page.js处，引入SDK核心类

放入解压后的sdk后，引入

// 引入SDK核心类
var QQMapWX = require("../testLocation/qqmap-wx-jssdk");//注意一定要相对路径，绝对路径可能会报错。
var qqmapsdk;

Page({
  data: {
    longitude: '', // 经度
    latitude: '', // 纬度
    //....其余数据
    nowAddress:"",//当前位置信息
    currentLat:"",
    currentLon:"",
    distance:""
  },
})

4.使用wx.getLocation（）方法，获取当前的经纬度

  // 实例化API核心类
  qqmapsdk = new QQMapWX({
    key: '注册的key'
  });

  let that = this;
  wx.getLocation({
    type: 'gcj02', //返回可以用于wx.openLocation的经纬度
    isHighAccuracy: true, // 开启地图精准定位

    success(res) {
      console.log(res);
        qqmapsdk.reverseGeocoder({
          location: {
            latitude: res.latitude,
            longitude: res.longitude
          },
          success: function(res){
            //console.log("当前地址信息：", res);
            
            let tempData = res.result.address + res.result.formatted_addresses.recommend;//详细地址
            console.log(tempData);
            
            that.setData({
              nowAddress:tempData,
              currentLat: res.result.location.lat,
              currentLon: res.result.location.lng
            });

            qqmapsdk.calculateDistance({
                //计算位置距离,见下
            })
          },
        })
    }
    // 失败的情况
    fail: (error) => {
      console.error('errorLocation:', error);
    },
  })

获取成功返回图片

5.使用 calculateDistance 方法计算两地经纬度之间的距离

  qqmapsdk.calculateDistance({
    mode: 'straight',//直线距离
    // 起点坐标
    from: {
      latitude: that.data.latitude,
      longitude: that.data.longitude
    },
    // 终点坐标 to是当前位置 注意是一个数组
    to: [{
      latitude: that.data.currentLat,
      longitude: that.data.currentLon
    }],
    success: (calc) => {
      // 计算结果输出为米
      that.setData({
        distance: calc.result.elements[0].distance
      });
      console.log("计算距离为:", that.data.distance + '米');
    },
    // 失败的情况
    fail: (error) => {
      console.error('error:', error);
    },
  })

三、遇到的问题和解决

问题1：定位不是很准确

在wx.getLocation时，加上 isHighAccuracy: true 来开启地图精准定位。开发中工具定位是根据ip来的，可以用手机测试来看准确定位。
问题2：使用腾讯位置服务没超过额度，但报“此key每日调用量已达到上限”

需要在腾讯位置服务的 配额管理 的 账户额度 中进行配额的分配，默认为0，只有一次调用上限

四、总结

通过使用腾讯地图SDK实现地点定位，我成功在微信小程序中实现了打卡定位签到的功能。

由于wx.getLocation只能够获取经纬度，不能够拿到详细地址；但可以使用腾讯位置服务第三方功能，使用腾讯地图的逆解析拿到详细地址，与使用其地点选取功能。

通过这次经历，我掌握了微信小程序使用腾讯地图SDK在实现地点定位时的应用。