微信小程序之wx.getLocation（）封装

腾讯地图API

若要使用getLocation方法必须在app.json中声明permission关键字
腾讯地图api地址：https://lbs.qq.com/
复制生成的keyid

代码实现：

app.json

"permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  },

**

1.location.js

**

//引入./utils/util.js中的$parseVars2Str方法  此方法是拼接传入的数组数据
import {
  $parseVars2Str
} from '../utils/util.js'

//引入MAP_KEY变量  此变量是腾讯滴入接口中的keyid
import {
  MAP_KEY
} from '../config/index.js'

//引入requestbasic.js文件中的$get方法  此方法是wx.resquest的封装
import {
  $get
} from '../utils/requestbasic.js'

//此方法为获取当前的位置的经纬度
export function $getLocation() {
  return new Promise((resolve, reject) => {
    wx.getLocation({
      type: 'gcj02',
      altitude: 'altitude',
      complete: (res) => {},
      fail: (res) => {},
      highAccuracyExpireTime: 0,
      isHighAccuracy: true,
      success: ({
        //longitude:lng, 给longitude变量取别名为lng
        longitude: lng,
        latitude: la
      }) => {
        resolve({
          lat,
          lng
        })
      },
    })
  })
}

//此方法将经纬度转换为地名
export function $convertLocationToAdress({lat , lng}) {
  return new Promise(async (resolve, reject) => {
    //使用腾讯地图获取当前地址 
    //调用对wx..request方法封装好的方法$get()方法  参数为url接口地址和data参数
    let {result} = await $get('https://apis.map.qq.com/ws/geocoder/v1/' , {
      location: $parseVars2Str(lat, lng),//两个参数为经纬度
      key: MAP_KEY
    })
    resolve(result)
  })
}

//此方法为将地名转换为位置信息，经纬度
export function $convertAdressToLocation(address) {
  return new Promise(async (resolve, reject) => {
    //使用腾讯地图获取当前地址 
    let {result} = await $get('https://apis.map.qq.com/ws/geocoder/v1/' , {
      address,
      key: MAP_KEY
    })
    resolve(result.location)
  })
}

2.requestbasic.js

//引入/config/index.js'中的BasicUrl常量
import {
  BasicUrl
} from '../config/index.js';

//封装wx.request方法
//传入参数为url接口地址 ， method请求方法 ， data数据
function $res(url, method , data) {

  wx.showLoading({
    title: '加载中...',
  })

  return new Promise((resolve, reject) => {
    wx.request({
      url: url.startsWith("http") ? url : BasicUrl + url,    // url.startsWith("http")判断是否为http开头 ， 若是则不拼接BasicUrl 若不是则拼接BasicUrl 
      method,
      data,
      success: (res => {
        resolve(res.data)
      }),
      fail(e) {
        reject(e)
      },
      complete(){
        wx.hideLoading()
      }
    })
  })
}

//封装get方式请求的wx.request方法
export function $get(url , data) {
  return $res(url, 'Get' , data)
  // pro.then(res => {
  //   console.log(res)
  // })
}

//封装post方式请求的wx.request方法
export function $post(url , data) {
  return $request(url, 'POST' , data)
  let pro = $request(url, 'POST')
  pro.then(res => {
    console.log(res)
  })
}

3.util.js

//$parseVars2Str方法用逗号拼接传入的数据
//传入参数为可变参数  ，传入参数个数不确定
export function $parseVars2Str(...args) {
  // return Array.prototype.join.call(arguments , ',');
  return args.join(",")
}

4.config.js

export const BasicUrl = '接口地址'
export const MAP_KEY = '腾讯地图的接口keyid的值'

5.使用此工具方法

导入location.js中的这三个方法
import {
  $convertLocationToAdress,
  $convertAdressToLocation,
  $getLocation
} from '../../utils/location.js'

Page({

	//data:数据变量声明一个location变量
	data: {
    location
  },

  async getlocation() {
  	//获取当前位置
    // let {
    //   lat,
    //   lng
    // } = await $getLocation()
	
	//将获取到的当前位置的经纬度传入convertLocationToAdress()函数中获取当前位置对应的地名
    // let res = await $convertLocationToAdress({lat , lng})
    // this.setData({
    //   location: res.address
    // })	
	
	//传入经纬度的值 ， 获取传入的经纬度对应的地名
    let res = await $convertLocationToAdress({lat:28 , lng:40})
    this.setData({
      location: res.address
    })
	
	//传入参数为字符串 ， 传入一个地名    ，   返回地址信息即经纬度信息
    let location = await $convertAdressToLocation('地名')
    console.log(location)
  },
})