位置API

124 阅读1分钟
<van-field
    title-width="80rpx"
    model:value="{{ address }}"
    center
    clearable
    label="位置"
    placeholder="请输入位置"
    border="{{ true }}"
    type="textarea"
    autosize>
    <van-button wx:if="{{show}}" bindtap="choose" icon="location-o" slot="button" size="small" type="primary"></van-button>
    <van-button wx:else bindtap="choose1" icon="location-o" slot="button" size="small" type="primary"></van-button>
  </van-field>
  <van-field
    title-width="80rpx"
    model:value="{{ address2 }}"
    center
    clearable
    label="位置"
    placeholder="请输入位置"
    border="{{ true }}"
    type="textarea"
    autosize>
    <van-button bindtap="choose2" icon="location-o" slot="button" size="small" type="primary"></van-button>
  </van-field>

2. 后台

//选择方法
choose(){
    //获取当前位置
    /* wx.getLocation({
      success:({latitude,longitude})=>{
        console.log(latitude,longitude);
      }
    }) */
   
    //选择位置
    wx.chooseLocation({
      //成功后的回调
      success:({address,name})=>{
        this.setData({
          address:address+' '+name
        })
      },
      //失败后的回调
      fail:({errMsg})=>{
        if(errMsg==="chooseLocation:fail auth deny"){
          this.setData({
            show:false
          })
        }
        // wx.$msg('通过右上角设置权限',2000,'none')
      }
    })
  },

//该方法,用于打开设置界面
  choose1(){
    //打开设置界面
    wx.openSetting({
      success:({authSetting})=>{
        //判断是否勾选了获取用户位置权限
        if(authSetting['scope.userLocation']){
          this.setData({
            show:true
          })
          //直接调用选择位置方法
          this.choose()
        }
      }
    })
  },

choose2(){
    //获取用户的当前设置
    wx.getSetting({
      //返回权限设置
      success:({authSetting})=>{
        //判断用户,如果拒绝过获取位置权限,打开设置界面
        if(authSetting['scope.userLocation']===false){
          //打开设置界面
          wx.openSetting({
            success:({authSetting})=>{
              //判断用户,如果勾选了获取位置权限,打开选择位置界面
              if(authSetting['scope.userLocation']===true){
                //打开选择位置界面
                wx.chooseLocation({
                  //成功后的回调
                  success:({address,name})=>{
                    this.setData({
                      address2:address+' '+name
                    })
                  },
                })
              }
            }
          })
        }else{
          //authSetting['scope.userLocation'] 返回 undefined 或 true 时执行 else
          //打开选择位置界面
          wx.chooseLocation({
            //成功后的回调
            success:({address,name})=>{
              this.setData({
                address2:address+' '+name
              })
            },
          })
        }
      }
    })
  },

async choose2(){
    let res = await wx.$chooseLocationWithSetting();
    this.setData({
      address2:res
    })
  },

3. location.js

//选择位置的方法
export let $chooseLocation = ()=>{
  return new Promise((resolve,reject)=>{
    //打开选择位置界面
    wx.chooseLocation({
      //成功后的回调
      success:({address,name})=>{
        resolve(address+' '+name)
      },
    })
  })
}

//打开设置的方法
export let $openSetting = ()=>{
  return new Promise((resolve,reject)=>{
    //打开设置界面
    wx.openSetting({
      success:async ({authSetting})=>{
        //判断用户,如果勾选了获取位置权限,打开选择位置界面
        if(authSetting['scope.userLocation']===true){
          resolve()
        }
      }
    })
  })
}

//通过设置选择位置的方法
export let $chooseLocationWithSetting = ()=>{
  return new Promise((resolve,reject)=>{
    //获取用户的当前设置
    wx.getSetting({
      //返回权限设置
      success:async ({authSetting})=>{
        //判断用户,如果拒绝过获取位置权限,打开设置界面
        if(authSetting['scope.userLocation']===false){
          //先打开设置
          await $openSetting()
          //再获取位置信息
          let res = await $chooseLocation()
          resolve(res)
        }else{
          //获取位置信息
          let res = await $chooseLocation()
          resolve(res)
        }
      }
    })
  })
}

//将位置相关的方法,注册给微信对象
wx.$chooseLocation=$chooseLocation
wx.$openSetting=$openSetting
wx.$chooseLocationWithSetting = $chooseLocationWithSetting