本篇文章是在小程序获取定位的基础上写的，且会用到wx.request封装
文章参考腾讯地图API
获取距离
思路：获取我的位置的经纬度，目标的经纬度，wx.request获得距离
方法一for...of块级作用域解决异步问题 不是闭包
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解决异步问题
思路：
1. 获得每个门店的经纬度，腾讯地图一对多的距离中to是可以写多个地址的，将获取到的所有经纬度按顺序拼接成要求的格式，获得关于距离的数组，再按顺序传入data中的对象的对应distance
2. Promise.all里面是放Promise的数组，表示这些数组按顺序执行，将需要按顺序执行的Promise类型的实例用Promise.all按顺序执行，用map处理得到的经纬度处理成字符串
3. 将取得的字符串发送请求得到有关距离的数组，再用forEach循环赋值shopList.distance
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
})
}
封装
注意Promise封装的函数，引用时需要用async await
/*
*将地址列表转换成坐标列表
*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
})
},