调取小程序当前经纬度位置及计算两点之间距离

于 2023-02-09 09:06:09 发布
阅读量1.7k 收藏 4
点赞数 1
分类专栏： 微信开发 文章标签： 小程序 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51263829/article/details/128946585
版权
文章讲述了在小程序中如何利用wx.getLocation接口获取用户位置，以及在需要频繁获取经纬度时，如何通过wx.startLocationUpdate和onLocationChange结合使用来实现。同时，文中提到了不同方法的精度差异和电量消耗，并给出了计算两点间距离的示例代码。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

调取小程序公共的getLocation接口，这个接口可以开启高精度模式，但是返回的数据可能会较慢，而且这个接口大概20S内只能调用一次，是无法反复调用的。调取方法如图所示：

    wx.getLocation({ //小程序 的获取当前的位置经纬度 

      type: 'gcj02',

      isHighAccuracy: true,

      success(res) {

        that.setData({ //给经纬度赋个值吧

          curLat: res.latitude,

          curLon: res.longitude

        })

如图所示curLat和curLon就是返回的经纬度，isHighAccuracy代表开启高精度。

如果是要求调取频率较高获取经纬度的话，就不能用上面这个API，要用另外两个API组合调用，分别为startLocationUpdate和onLocationChange，通过这两个API就可以持续性获得当前所在位置的API，但是这种耗电较高。获取到两次经纬度之后进行计算算取两点间距离，使用方法如图所示。

    wx.startLocationUpdate({

      success: (res) => {

        wx.onLocationChange((data) => {

          //获取当前时间

          var currentTime = new Date().getTime();

          //获取上次保存的位置信息

          var oldLocation = wx.getStorageSync('oldLocation');

          //获取上次执行的时间

          var oldTime = wx.getStorageSync('oldTime');

          //将经纬度拼接

          var newLocation = data.latitude + "" + data.longitude;

          console.log("更新了计算距离", newLocation,

            "精度：", data.horizontalAccuracy, "距离：", that.data.distance)

          if (currentTime - oldTime > 1000) {

            that.setData({ //给经纬度赋个值吧

              chooseLat: data.latitude,

              chooseLon: data.longitude

            })

            //计算距离

            that.getDistance(

              that.data.chooseLat,

              that.data.chooseLon,

              that.data.curLat,

              that.data.curLon)

            //缓存当前最新位置

            wx.setStorageSync('oldLocation', newLocation);

            //缓存当前执行的时间

            wx.setStorageSync('oldTime', currentTime);

            //将位置信息上传后台的自己的代码

            // uploadLocation(newLocation);

          }

        });

      },

      fail: (err) => {

        console.log(err);

      }

    })

最后的执行代码阶段，可以根据缓存的前后地点是否为同一地点和时间来进行比较，代码里虽然两种都存了但是只用了时间来控制比较，进入时间1S之后，调取计算经纬度距离的方法来进行计算两点间实际距离。

  getDistance: function (lat1, lng1, lat2, lng2) {

    var that = this;

    lat1 = lat1 || 0;

    lng1 = lng1 || 0;

    lat2 = lat2 || 0;

    lng2 = lng2 || 0;

    var rad1 = lat1 * Math.PI / 180.0;

    var rad2 = lat2 * Math.PI / 180.0;

    var a = rad1 - rad2;

    var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;

    var r = 6378137;

    var distance = r * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(rad2) * Math.pow(Math.sin(b / 2), 2)));

    that.setData({

      long: distance,

    })

  },

后面那种调用的方法精确度会受到室内外的影响，正常情况加获取经纬度误差为5-15米，上述那种方法在室内精确度为35-30，但是在室外为3-5，相差极大，不建议在室内使用。

最后附上该文件地址：（文件里还联网腾讯地图获取了当前所在位置）

var tools = require('../../utils/tool').default
// 引入SDK核心类，js文件根据自己业务，位置可自行放置
var QQMapWX = require("../../libs/qqmap-wx-jssdk1.2/qqmap-wx-jssdk"); //引入插件
var qqmapsdk; //定义变量(文档那的)
const app = getApp()
Page({
  data: {
    choose: true,
    curLat: 100, // 存纬度的 (手动选择地址后 经纬度重新赋值， 打开地图 要用)
    curLon: 100, //存经度的,
    curCityAddress: '', //当前位置
    long: 10, //距离范围
    chooseLat: 0, //纬度
    chooseLon: 0, //经度
    chazhi: "", //差值
    // ---------------
    bgJigsaw: '',
  },
  onLoad() {},
  onShow() {
    tools.getImageBase64('/static/beijing.png').then(res => {
      this.setData({
        bg: res
      })
    })
    tools.getImageBase64('/static/beijing.png').then(res => {
      this.setData({
        bgJigsaw: res
      })
    })
  },
  chooseMap() {
    var that = this;
    // -------------------------
    wx.startLocationUpdate({
      success: (res) => {
        wx.onLocationChange((data) => {
          //获取当前时间
          var currentTime = new Date().getTime();
          //获取上次保存的位置信息
          var oldLocation = wx.getStorageSync('oldLocation');
          //获取上次执行的时间
          var oldTime = wx.getStorageSync('oldTime');
          //将经纬度拼接
          var newLocation = data.latitude + "" + data.longitude;
          console.log("更新了计算距离", newLocation,
            "精度：", data.horizontalAccuracy, "距离：", that.data.distance)
          if (currentTime - oldTime > 1000) {
            that.setData({ //给经纬度赋个值吧
              chooseLat: data.latitude,
              chooseLon: data.longitude
            })
            //计算距离
            that.getDistance(
              that.data.chooseLat,
              that.data.chooseLon,
              that.data.curLat,
              that.data.curLon)
            //缓存当前最新位置
            wx.setStorageSync('oldLocation', newLocation);
            //缓存当前执行的时间
            wx.setStorageSync('oldTime', currentTime);
          }
        });
      },
      fail: (err) => {
        console.log(err);
      }
    })

    // ------------------------
  },
  getDistance: function (lat1, lng1, lat2, lng2) {
    var that = this;
    lat1 = lat1 || 0;
    lng1 = lng1 || 0;
    lat2 = lat2 || 0;
    lng2 = lng2 || 0;
    var rad1 = lat1 * Math.PI / 180.0;
    var rad2 = lat2 * Math.PI / 180.0;
    var a = rad1 - rad2;
    var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
    var r = 6378137;
    var distance = r * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(rad2) * Math.pow(Math.sin(b / 2), 2)));
    that.setData({
      long: distance,
    })
  },
  // 点击打开
  checkStart: function () {
    // this.setData({
    //   choose: false
    // })
    // this.chooseMap()
    // var that = this;
    // app.getPermission(that);
    var that = this;
    var locations;
    qqmapsdk = new QQMapWX({
      key: '你的KEY'
    }); //新建实例
    wx.getLocation({ //小程序 的获取当前的位置经纬度 
      type: 'gcj02',
      isHighAccuracy: true,
      success(res) {
        that.setData({ //给经纬度赋个值吧
          curLat: res.latitude,
          curLon: res.longitude
        })
        qqmapsdk.reverseGeocoder({ //腾讯的地图的接口 经纬度查位置 //并没有很精确
          location: {
            latitude: res.latitude,
            longitude: res.longitude
          },
          success: function (addressRes) {
            // 可看文档取自己需要信息  这只取了address
            // that.weather()
            that.setData({
              curCityAddress: addressRes.result.address,
            })
          },
          fail: function (error) {
            console.error(error);
          },
        })
      },
      fail: function (err) {
        console.log(err);
        //失败的时候 可以查查 用户授权情况 
        wx.getSetting();
        //获取用户的当前设置, 返回值中只会出现小程序已经向用户请求过的权限
        wx.getSetting({
          success: function (res) {
            console.log(res);
            // console.log(res.authSetting.scope.userLocation); //可以判断用户是否 取消授权了 以便后续可以再次提醒他授权
            //授权在这不多做讨论
          }
        })
      }
    })
  }
})

这个demo做的是先获取当前所在位置，然后再用监听的方法去判断两点间动态距离，那个key需要自己去官网进行申请，并且在企业微信官网平台上进行白名单配置。

腾讯位置服务 - 立足生态，连接未来 (qq.com)

小程序 (qq.com)

开发设置里的服务器域名设置

 

APPID申请自己的小程序ID，另外引入文件的地址 

 

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值