实现小程序的定位

框架：uniapp+vue
1，用户授权配置
在pages.json文件中配置

  "pages": [
     {
      "path": "pages/home/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationBarBackgroundColor": "#6D84FC",
        "navigationBarTextStyle": "white"
      },
      "permission": {
        "scope.userLocation": {
          "desc": "你的位置信息将用于小程序位置接口的效果展示"
        }
      },
      "requiredPrivateInfos": [
        "getFuzzyLocation",
        "getLocation",
        "onLocationChange",
        "startLocationUpdateBackground",
        "chooseAddress"
      ]
    }]

2,代码实现

a = 'scope.userLocation'代表获取用户地理位置权限
isGetLocation(a = 'scope.userLocation') {
      //检查当前是否已经授权访问scope属性
      var _this = this;
      uni.getSetting({
        success(res) {
          console.log('!res.authSetting[a]', !res.authSetting[a]);
          if (!res.authSetting[a]) {
            //每次进入程序判断当前是否获得授权，如果没有就去获得授权，如果获得授权，就直接获取当前地理位置
            _this.getAuthorizeInfo();
          } else {
            // 直接获取当前地理位置
            _this.getLocationInfo();
          }
        }
      });
    }
    

    // 弹出获取授权（地理，个人微信信息等授权信息）弹窗
    getAuthorizeInfo(a = 'scope.userLocation') {
      var _this = this;
      uni.authorize({
        scope: a,
        success() {
          _this.getLocation();
        },
        fail(error) {
          //点击了拒绝授权后--就一直会进入失败回调函数--此时就可以在这里重新拉起授权窗口
          console.log('拒绝授权', error);
          uni.showModal({
            title: '提示',
            content: '若点击不授权，将无法使用位置功能',
            cancelText: '不授权',
            cancelColor: '#999',
            confirmText: '授权',
            confirmColor: '#f94218',
            success(res) {
              console.log(res);
              if (res.confirm) {
                // 选择弹框内授权
                uni.openSetting({
                  success(res) {
                    _this.isGetLocation();
                    console.log(res.authSetting);
                  }
                });
              } else if (res.cancel) {
                _this.$store.commit('changeCity', { city: '北京', province: '北京', address: '北京市' });
                // 选择弹框内 不授权
                uni.showToast({
                  title: '定位未授权某些功能会受到影响',
                  icon: 'error'
                });
              }
            }
          });
        }
      });
    },

    // 取当前地理位置(直接)
    getLocationInfo() {
      var _this = this;
      uni.getLocation({
        type: 'wgs84',
        success: function (res) {
          console.log('this', _this);
          _this.latitude = res.latitude;
          _this.longitude = res.longitude;
          _this.getLocationDetail();
          console.log('当前位置的经度：' + res.longitude);
          console.log('当前位置的纬度：' + res.latitude);
        }
      });
    },

    //获取当前所在位置的经纬度(授权获取)
    getLocation() {
      uni.getLocation({
        type: 'gcj02',
        success: res => {
          console.log(res);
          this.latitude = res.latitude.toString();
          this.longitude = res.longitude.toString();
          // 获取地理位置详情信息
          this.getLocationDetail();
        }
      });
    },

 //根据经纬度获取详细的地址
   getLocationDetail() {
    业务代码
  }

更多文章关注微信公众号IT工具庫