2023超级详细微信小程序纯前台获取当前具体位置，地图上选点进行位置签到 计算签到距离_微信小程序地图选点

前言：

为了解决不同板块获取位置以及取代三级联动的问题，当前进行研究微信小程序获取当前具体位置。

思路：

调用微信小程序中获取当前地理位置的方法，与设置地理位置的方法，通过、、、实现当前距离设置打卡地点的距离，如果自定义的距离小于等于设置的距离，且签到时间在有效的范围中，则签到成功，并且签到只能是一次。这里获取到当前时间地点，将签到的信息保存到数据库中

技术难点：

一，解决通过getLocation获取的是IP地址--->不精准

二，将当前地理位置的经纬度与定义地理位置的经纬度的差距转换为距离的m

步骤：

1.获取当前地理位置的经纬度

方法一：

  //地理位置
  getLocation(){
    wx.getLocation({
      isHighAccuracy: true,
      success: (res) =>{
        console.log('纬度' + res.latitude)
        console.log('经度' + res.longitude)
      }
     })
    console.log("调用地理位置")
  },

缺点：不精准，获取的是大概的位置

如果想要精准就要依据第三方的接口来：这里我使用腾讯地图指定SDK获取地址

下面需要注册腾讯地图的key

一，在腾讯地图注册

腾讯位置服务 - 立足生态，连接未来 (qq.com)https://lbs.qq.com/二，在开发指南-->入门-->开发文档-->微信小程序SDK

三，申请到key

1. 下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.1   JavaScriptSDK v1.2

2. 安全域名设置，在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名，添加https://apis.map.qq.com（可以不设置，但会有一个安全提示）

 现在完成后，启动我们的微信小程序开发软件，新建一个项目。在libs文件夹中导入小程序的SDK。

getCurrentLocal.js

const QQMapWX = require('../../libs/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.js');
 
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    current_location:'',
    flag: false
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this 
    that.getCurrentLocal()
  },
 
  // 获取当前地理位置 授权验证
  getCurrentLocal(){
    let that = this;
    wx.getSetting({
      success(res) {
        if (res.authSetting['scope.userLocation'] == false){// 如果已拒绝授权，则打开设置页面
          wx.openSetting({
            success(res) {}
          })
        }  else { // 第一次授权，或者已授权，直接调用相关api
          that.getMyLocation()
        }
      }
    })
  },
  //获取当前地理位置
  getMyLocation(){
    let that = this
    wx.getLocation({
      type: 'wgs84',
      success(res) {  
        console.log('location',"res"+ res);
        var locationString = res.latitude + "," + res.longitude;
        wx.request({
          url: 'https://apis.map.qq.com/ws/coord/v1/translate?',
          data: {
            locations:locationString,
            type:1,
            key:'IR7BZ-ZMHLD-6WK4Z-PPNOE-QS7SV-BSBW6'
          },
          method: 'GET',
          success: function (request) {
            console.log(request);
            var locationString_new = request.data.locations[0].lat + "," + request.data.locations[0].lng;
            wx.request({
              url: 'http://apis.map.qq.com/ws/geocoder/v1/',
              data: {
                "key": "IR7BZ-ZMHLD-6WK4Z-PPNOE-QS7SV-BSBW6",
                "location": locationString_new
              },
              method: 'GET',
              success: function (r) {
                console.log(r);
                //输出一下位置信息
                console.log('当前位置',
                r.data.result.formatted_addresses.recommend,
                r.data.result.location.lat,
                r.data.result.location.lng)
                var current_location = r.data.result.formatted_addresses.recommend;
                var lat = r.data.result.location.lat;//当前的纬度
                var lng = r.data.result.location.lat;//当前的经度
                that.setData({
                  current_location: current_location,
                  flag: true
                })
                //这步是将位置信息保存到本地缓存中，key = value的形式
                try {
                  wx.setStorageSync('locationInfo', r.data.result.formatted_addresses.recommend)
                } catch (e) {
                  console.log(e)
                }
              }
            });
 
          }
        });
      }
    })
  }
	
})

2.地理位置的经纬度的差距转换为距离的m

我们通过设置的距离与我们当前的距离进行对比，进行转换

2.1方法第一步：将经纬度转换为弧度rad

将以上获取经纬度信息的方法进行一下修改，获取经纬度信息后，将获取到的经纬度信息与目标信息作为参数传入getDistance()方法

rad (d) {
    return d * Math.PI / 180.0;
  },
//进行计算
 getDistance(lat1, lng1, lat2, lng2) {
    var radLat1 = this.rad(lat1);
    var radLat2 = this.rad(lat2);
    var a = radLat1 - radLat2;
    var b = this.rad(lng1) - this.rad(lng2);
    var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
    Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
    s = s * 6378.137; // EARTH_RADIUS;
    s = Math.round(s * 10000) / 10000; //输出为公里
 
    var distance = s;
    var distance_str = "";
 
    if (parseInt(distance) >= 1) {
      distance_str = distance.toFixed(1) + "km";
    } else {
      distance_str = distance * 1000 + "m";
    }
    //s=s.toFixed(4);
 
    console.info('距离是', s);
    console.info('距离是', distance_str);
    return s;
  },

3.配置云数据库

云数据库具有许多优势，包括：

1. 灵活性和易用性：云数据库提供了简化的管理界面和工具，使得数据库的设置、配置和管理变得更加简单和方便。同时，它还支持各种编程语言和开发框架，使得开发人员可以更轻松地集成和使用数据库。

2. 成本效益：云数据库采用按需付费模型，可以根据实际使用情况支付费用，避免了传统数据库购买和维护的高成本。此外，云数据库还可以通过资源共享和优化来提高资源利用率，从而降低总体成本。

这里我们首次使用云数据库会有1个月的免费试用

4.设置打卡

对比签到地与目的地是否少于100m

5.应用场景：

会议OA的签到功能，商场项目的收货地址的取代三级联动，以及许多使用位置的功能都可以用得上。

效果：

总结：

 对于多频次的相同请求，可通过缓存结果，并定时访问更新的方式，减少对在线服务调用的依赖；