本篇文章是在小程序获取定位的基础上写的，且会用到wx.request封装
文章参考腾讯地图API

获取距离

<font color=#22a6b3>思路：获取我的位置的经纬度，目标的经纬度，wx.request获得距离</font>

方法一for...of块级作用域解决异步问题 <font color=red>不是闭包</font>

async   distance() {
    //getLocation获取当前位置
    let {lat,lng} = await getLocation()
    console.log(lat, lng)
    // 获取每个门店到我的位置的距离
    let shopList = this.data.shopList
    for (let r of shopList) {
      let { location } = await convertAddress2Location(r.address)
      r.location = location
      let {result} = await $get('https://apis.map.qq.com/ws/distance/v1/',{
        key: TENCENTMAPKEY,
        from: [lat, lng].join(','),
        to: [r.location.lat, r.location.lng].join(','),
      })
      r.distance = result.elements[0].distance
    }
    this.setData({
      shopList:this.data.shopList
    })
  },
  data: {
    address: '',
    shopList: [{
      id:1,
      name:'1号店',
      address: '南京市 柳洲东路189号 京新广场1层F1-H单元',
      location:'',
      distance:0
    },{
        id: 1,
        name: '2号店',
        address: '南京市 中山门大街301号 森林摩尔商业街2号楼第一层107商铺',
        location: '',
        distance: 0
    },{
        id: 1,
        name: '3号店',
        address: '南京市秦淮区中山南路122号大洋百货1层1B-17号',
        location: '',
        distance: 0
    }],
    latitude:23,
    longitude:100,
    markers: []
  },

方法二 用Promise.all解决异步问题

<font color=#22a6b3>思路：
1. 获得每个门店的经纬度，腾讯地图一对多的距离中to是可以写多个地址的，将获取到的所有经纬度按顺序拼接成要求的格式，获得关于距离的数组，再按顺序传入data中的对象的对应distance
2. Promise.all里面是放Promise的数组，表示这些数组按顺序执行，将需要按顺序执行的Promise类型的实例用Promise.all按顺序执行，用map处理得到的经纬度处理成字符串
3. 将取得的字符串发送请求得到有关距离的数组，再用forEach循环赋值shopList.distance</font>

async distance() {
    //getLocation获取当前位置
    let {lat,lng} = await getLocation()
    let proList=[]
    this.data.shopList.forEach( r=>{
      // 获取shopList中的每个对象的位置
      let pro = convertAddress2Location(r.address)
      proList.push(pro)
    })
    let res = await Promise.all(proList)
    //用map,join方法将多个地址的经纬度拼接成固定的格式
    let to = res.map(r=>{
      return  [r.location.lat,r.location.lng].join(',')
    }).join(';')
    let {result} =await $get('https://apis.map.qq.com/ws/distance/v1/',{
      key: TENCENTMAPKEY,
        from: [lat, lng].join(','),
        to,
    })
    this.data.shopList.forEach((r,i)=>{
      r.distance = result.elements[i].distance
    })
    this.setData({
      shopList:this.data.shopList
    })
  }

封装

<font color=#22a6b3>注意Promise封装的函数，引用时需要用async await</font>

/*
*将地址列表转换成坐标列表
*addressList:[***,***]
*/
export async function convertAddressList2Location(addressList) {
  // // 组装Promise请求列表
  let proList = []
  addressList.forEach(r => {
    let pro = convertAddress2Location(r)
    proList.push(pro)
  })
  //统一发起请求
  let res = await Promise.all(proList)
  return res
}

/*
*获取一对多距离
*fromLocation:{lat:**,lng:**}
*toLocationList:[{location:{lng:*,lat:*}},{location:{lng:*,lat:*}}]
*/
export async function getDistanceOne2Many(fromLocation,toLocationList){
  let to = toLocationList.map(r => {
    return $parseVar2Str(r.location.lat, r.location.lng)
  }).join(';')
  let distance = await $get('https://apis.map.qq.com/ws/distance/v1/', {
    key: TENCENTMAPKEY,
    from: $parseVar2Str(fromLocation.lat, fromLocation.lng),
    to,
  })
  return distance
}

async distance() {
    let {lat,lng} = await getLocation()
   //地址列表
    let addressList = this.data.shopList.map(r=>r.address)
    //因为convertAddressList2Location return的是Promise对象，所以要async await
    let res =await convertAddressList2Location(addressList)
    let distance = await getDistanceOne2Many({ lat, lng },res)
    this.data.shopList.forEach((r,i)=>{
      r.distance = distance.result.elements[i].distance
    })
    this.setData({
      shopList: this.data.shopList
    })
    
  },