定位5.根据地址获取经纬度,一对多获取距离和时间等相关信息

tech2025-09-08  5

详见:码云小程序demo1 1.wxml <view> <view wx:for="{{shopList}}"> {{item.name}}---{{item.address}} <view>{{item.other.distance}}m</view> <view>{{item.other.duration}}s</view> </view> </view> 2.js import Router from '../../utils/index' import { $getLocation, $chooseLocation } from '../../utils/location' Router({ /** * 页面的初始数据 */ data: { s_address: '', r_address: '', shopList: [{ id: 1, name: '雨花客厅店', address: '南京市安德门大街10号' }, { id: 2, name: '百家湖店', address: '江苏省南京市双龙大道10号' }, { id: 3, name: '淮安万达店', address: '江苏省宿淮安市翔宇大道100号' }], isok: true //开始为true,弹出授权框 }, async onLoad() { //加载调用 let req_arr = [] //给每一个地址转化成经纬度 this.data.shopList.forEach(r => { //调用腾讯地图的接口 let req = this.$get('https://apis.map.qq.com/ws/geocoder/v1/', { //将地址传给接口 address: r.address, key: 'K2VBZ-IM5WO-V65W7-SV4SA-W4HYF-VSFD3' }) //将得到的经纬度添加到数组末尾 req_arr.push(req) }) //将Promise.all会得到里面的发生完才结束,将Promise.all的结果await出来返回一个promise对象 let res = await Promise.all(req_arr) //获取当前自身的经纬度 let from = await $getLocation() console.log(from); //将promise里需要的值组成一个新的数组 let to = res.map(r => r.result.location) //将数组的经纬度以','分隔组成一个新的数组,并将新数组转化成以';'分隔的字符串 to = to.map(r => [r.lat, r.lng].join()).join(';') console.log(to); //将经纬度依次传入,得到距离和时间等相关信息 let distance = await this.$get('https://apis.map.qq.com/ws/distance/v1/matrix?parameters', { key: 'K2VBZ-IM5WO-V65W7-SV4SA-W4HYF-VSFD3', //将自身的经纬度以','分隔转化成字符串,传入接口, from: [from.lat, from.lng].join(), //将要去的地方的经纬度依次传入,得到和数组shopList一致的数组信息,不会乱 to }) //将接口传来的信息点出需要的内容 let dis_list = distance.result.rows[0].elements //将shopList数组每一项添加一个距离和时间信息 this.data.shopList.forEach((r, i) => { r.other = dis_list[i] }) //更新shopList数组 this.$set('shopList', this.data.shopList) console.log(this.data.shopList); }, }
最新回复(0)