首页 > 网络编程 > JavaScript > 关于微信小程序中使用wx.getLocation获取当前详细位置并计算距离

关于微信小程序中使用wx.getLocation获取当前详细位置并计算距离

福牛 4月 25, 2023 18 0

前言

wx.getLocation只能够获取经纬度，不能够拿到详细地址；如果你的项目刚好也使用腾讯地图的api，那么可以通过腾讯地图的逆解析就能拿到详细地址了；

1，wx.getLocation()

先介绍一下wx.getLocation（）方法的使用； 此方法可以获取当前的经纬度和速度、高度；官网链接

想要使用这个方法，先需要在小程序后台 《开发管理-接口设置》中开通接口权限，需要审核通过才能使用：

-1

注意：自 2022 年 7 月 14 日后发布的小程序，若使用该接口，需要在 app.json 中进行声明，否则将无法正常使用该接口；如下： app.json

  1.      “requiredPrivateInfos”: [“getLocation”, “chooseLocation”, “chooseAddress”],

开始使用：

  1. wx.getLocation({
  2.      type: ‘gcj02’, // 比较精确
  3.      success: (res) => {
  4.          console.log(res);
  5.      }
  6.      })

那么此接口只能获取到当前的经纬度 并不是当前的省市区街道等地址；下面我们会配合使用腾讯地图的api进行地址的逆解析获取详细地址；

2，获取详细地址

第一步：在腾讯位置服务注册获取key或公司里面已经获取过key： 腾讯地图官方链接

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

-2第三步：在app.json中添加：

  1.      “permission”: {
  2.      “scope.userLocation”: {
  3.          “desc”: “你的位置信息将用于小程序位置接口的效果展示”
  4.      }
  5.      }

第四步：我是在onLoad生命周期加载的代码，你可以根据具体情况把下面代码复制到其他相应位置；

先下载jssdk文件解压后放到相应位置

  1. // 引入SDK核心类
  2. let QQMap = require(“../../utils/qqmap-wx-jssdk.min”);
  3. let QQMapSdk;
  4. Page({
  6. /**
  7.      * 页面的初始数据
  8.      */
  9. data: {
  10.      currentLat:“”,
  11.      currentLon:“”,
  12. },
  13. })
  1.      /**
  2.      * 生命周期函数–监听页面加载
  3.      */
  4.      onLoad(query){
  5.      this.getLoaction()
  6.      }
  7.      // 获取位置的方法
  8.      getLoaction() {
  9.          // 1.先开始定位
  10.          wx.getLocation({
  11.              type: ‘gcj02’, // 比较精确
  12.              success: (res) => {
  13.              // 2,地址逆解析 根据经纬度获取实际地址
  14.              QQMapSdk.reverseGeocoder({
  15.                  location: {
  16.                  latitude: res.latitude,
  17.                  longitude: res.longitude
  18.                  },
  19.                  success: (data) => {
  20.                  console.log(“当前地址信息：”, data);
  21.                  // 存储 详细地址 和当前获取的经纬度
  22.                  let address = data.result.address + data.result.formatted_addresses.recommend;
  23.                  this.setData({
  24.                      currentLoaction: address,
  25.                      currentLat: data.result.location.lat,
  26.                      currentLon: data.result.location.lng
  27.                  })
  29.                  },
  30.      fail: (error) => {
  31.                  console.error(“err:”, error)
  32.                  },
  33.              })
  34.              }
  35.          })
  36.          }

3，计算距离

可以使用 calculateDistance 方法计算两地经纬度之间的距离；

  1.      // 计算两个经纬度的直线距离 https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodCalculatedistance
  2.          calculateDistanceFun(){
  3.          QQMapSdk.calculateDistance({
  4.              mode: ‘straight’,//直线距离
  5.              // 起点坐标
  6.              from: {
  7.                  latitude: this.data.latlon.lat,
  8.                  longitude: this.data.latlon.lon
  9.              },
  10.              // 终点坐标 to是当前位置 注意是一个数组
  11.              to: [{
  12.                  latitude: data.result.location.lat,
  13.                  longitude: data.result.location.lng
  14.              }],
  15.              success: (calc) => {
  16.                  // 计算结果输出为米
  17.                  let distance = calc.result.elements[0].distance;
  18.                  console.log(“计算距离为:”, distance + ‘米’);
  19.              },
  20.              // 失败的情况
  21.              fail: (error) => {
  22.                  console.error(‘error:’, error);
  23.              },
  24.              })
  25.          }

4，报错信息： getLocation:fail 频繁调用会增加电量损耗

如果出现以下报错信息说明：

-3

我们在调用wx.getLocation()方法的回调里面又直接调用了腾讯地图的reverseGeocoder方法（腾讯地图api也可能也调用了wx.getLocation()方法 导致间隔不够30秒报频繁调用）

解决方法：调用 reverseGeocoder方法时 传入经纬度即可，什么都不传就会报这个错误；

  1.      qqmapsdk.reverseGeocoder({
  2.      //传入当前的经纬度
  3.                  location: {
  4.                  latitude: res.latitude,
  5.                  longitude: res.longitude
  6.                  },
  7.                  success: (data) => {
  8.                  },
  9.                  fail: (error) => {
  10.                  console.error(“err:”, error)
  11.                  },
  12.              })

5，报错信息： 请求源未被授权

出现这个报错说明 你引用的key值 没有授权你当前电脑的ip地址；

-4

解决方法：

需要在腾讯地图的后台配置一下你的ip;并把允许在小程序中使用勾选上；

-5

WebServiceAPI Key配置中的授权IP

到此这篇关于关于微信小程序中使用wx.getLocation获取当前详细位置并计算距离的文章就介绍到这了,更多相关小程序wx.getLocation获取位置计算距离内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

标签

相关推荐

发表评论