定位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);
  },
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值