2022-08-25 wepy小程序调用微信定位api获取当前所处位置的具体信息

wepy+微信小程序+腾讯地图api

注：本文内容部分内容来源于网友的文章，详情可阅读☞http://t.csdn.cn/wlOfh，该文详细简述了如何去申请腾讯key，调用api，以及较为完整的样例代码，本文是在我的业务上对网友的文章进行了一些小改。

使用wx.getLocation前需要先申明scope.userLocation，即：

"permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序定位省份"
    }
}

完整代码如下：

<template>
  <view>    
    {{location}}
    <view wx:if="{{location == ''}}" @tap="getData()">点击获取当前位置</view>
  </view>
</template>

<script>
import wepy from 'wepy';
let QQMapWX = require('../qqmap-wx-jssdk');
let qqmapsdk;

export default class index extends wepy.page {
  /**
   * 对应于原生的page.json文件
   **/
  config = {
    navigationBarTitleText: '定位',
  };

  /**
   * 声明页面中所引用的组件，或声明组件中所引用的子组件
   **/
  components = {};

  /**
   * 声明页面所引用的Mixin实例
   **/

  /**
   * 页面所需数据均需在这里声明，可用于模板数据绑定
   **/
  data = {
    location: '正在获取定位..',
  };

  /**
   * 声明计算属性
   **/
  computed = {};

  /**
   *  声明页面wxml中标签的事件处理函数
   **/
  methods = {};

  /**
   * 声明组件之间的事件处理函数
   **/
  events = {};

  //工具函数,封装的Promise,判断是否授权,可以避免回调地狱
  async wxAuthorize(scope = 'scope.userLocation') {
    return new Promise((resolve) => {
      wx.authorize({
        scope, //发起定位授权
        success: () => {
          console.log('有定位授权');
          //授权成功，此处调用获取定位函数
          resolve(true);
        },
        fail() {
          console.log('没有同意授权定位');
          resolve(false);
        },
      });
    });
  }

  // 获取定位
  async getLocation() {
    let that = this;
    console.log('调用腾讯api获取定位..');
    qqmapsdk = new QQMapWX({
      key: '这里填写你的key', // 这个key在这里申请👉 https://lbs.qq.com/service/webService/webServiceGuide/webServiceOverview
    });
    const res = await new Promise((resolve) => {
      wx.getLocation({
        //获取地址经纬度
        type: 'wgs84',
        complete(e) {
          if (e.errCode == 2) {
            that.location = '请打开定位授权';
            that.$apply();
            resolve(false);
          } else {
            resolve(e);
          }
        },
      });
    });
    const latitude = res.latitude;
    const longitude = res.longitude;

    const res2 = await new Promise((resolve) => {
      qqmapsdk.reverseGeocoder({
        //SDK调用这里只需要具体到城市,所以这两个就够,具体可根据业务需求获取
        location: {
          latitude,
          longitude,
        },
        success: (res) => {
          resolve(res);
        },
      });
    });
    console.log('定位：');
    console.log(res2.result.ad_info);
    this.location =
      res2.result.ad_info.province +
      ' ' +
      res2.result.ad_info.city +
      ' ' +
      res2.result.ad_info.district;
    this.$apply();
  }

  async getData() {
    const isAuth = await this.wxAuthorize();
    if (isAuth) {
      this.getLocation();
    } else {
      console.log('请授权当前位置');
      this.location = '';
      wx.showModal({
        title: '请授权当前位置',
        content: '需要获取您的地理位置,请授权!!!',
        showCancel: true,
        confirmText: '去授权',
        success: function(res) {
          if (res.confirm) {
            wx.openSetting({
              success(res) {
                console.log(res.authSetting, res, '答应授权');
                this.getLocation();
              },
            });
          }
        },
      });
    }
  }

  /**
   * 只在Page中存在的页面生命周期函数
   */
  async onShow() {
    let res = await this.wxAuthorize();
    if (res) {
      this.getLocation();
    } else {
      this.location = '';
    }
    this.$apply();
  }

  /**
   * 在Page和Component共用的生命周期函数
   */
  async onLoad() {}
}
</script>

qqmap-wx-jssdk下载地址：https://mapapi.qq.com/web/miniprogram/JSSDK/qqmap-wx-jssdk1.2.zip 该链接长期有效。
最后，再贴上另一篇文章☞ http://t.csdn.cn/JpMXO ，该文章写得也很详细。