小程序中计算距离信息

简介: 小程序中计算距离信息

我们日常在小程序中,经常有一种计算离自己最近的地点,并且给出一个推荐列表来的功能。那小程序是如何计算自己的当前位置和其他地点之间的距离呢?我们今天就讲解一下低代码中是如何做的。


新建连接器


低码中通过连接器来访问腾讯地图的api

我们这里需要用到计算距离的api

入参有三个,计算方式让你选择步行、公交还是开车。起点坐标需要输入当前位置的经纬度。终点坐标需要是一个集合,每个位置都需要是经纬度,不同位置直接以分号隔开。


知道了api的用法我们就需要在低码中调用。调用之前我们先需要新建一个数据源,把位置都录入到数据源中。


新建数据源


我们数据源只需要两个字段,名称和位置

数据源建好之后,我们通过数据管理后台录入两条数据

这里注意要把经纬度录入正确了,可以使用地图工具的坐标拾取来获取经纬度的信息


定义变量


为了显示距离信息,我们可以在变量里定义一个数组变量用来存放距离信息


获取距离


为了获取具体的距离信息,我们可以在生命周期函数里调用数据源的方法来进行计算,并将计算的结果赋值给变量

/*
* 可通过 $page 获取或修改当前页面的 变量 状态 handler lifecycle 等信息
* 可通过 app 获取或修改全局应用的 变量 状态 等信息
* 具体可以 console.info 在编辑器Console面板查看更多信息
* 如果需要 async-await,请在方法前 async
*/
export default {
  async onPageLoad(query) {
    //console.log('---------> LifeCycle onPageLoad', query)
    let jiancedian = await app.cloud.callModel({
      name:'hsjcd_avb5fh8',
      methodName:'wedaGetList',
      params:{
      }
    })
    let to = []
    for(let item of jiancedian){
      to.push(item.wz.geopoint.coordinates.reverse().join())
    }
    let result = await app.cloud.callConnector({
      name: 'txdt_32els26',
      methodName: 'distanceMatrix',
      params: {
        "from": "40.823685,111.756445",
        "mode": "walking",
        "to": to.join(";")
      }
    })
    $page.dataset.state.distance = result.result.rows[0].elements
  },
  onPageShow() {
    //console.log('---------> LifeCycle onPageShow')
  },
  onPageReady() {
    //console.log('---------> LifeCycle onPageReady')
  },
  onPageHide() {
    //console.log('---------> LifeCycle onPageHide')
  },
  onPageUnload() {
    //console.log('---------> LifeCycle onPageUnload')
  },
}

变量绑定


获取到变量的值之后,我们可以在页面中添加普通容器和文本组件,绑定具体的值就可以


总结


我们本篇介绍了如何调用腾讯地图的计算距离的api,距离计算在小程序中还是比较常见的功能,可以方便用户根据距离选择最近的店铺或者检测点,结合腾讯地图可以直接进行导航,还是一个比较方便的功能。学会了赶紧去试试吧。

相关文章
|
6月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的高校实习信息发布网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的高校实习信息发布网站附带文章源码部署视频讲解等
80 20
|
6月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的大学校园生活信息平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的大学校园生活信息平台附带文章源码部署视频讲解等
71 12
|
2月前
|
小程序 JavaScript
微信小程序之input组件及其获取用户输入信息
微信小程序之input组件及其获取用户输入信息
66 1
|
6月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的高校教师教研信息填报系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的高校教师教研信息填报系统附带文章源码部署视频讲解等
35 0
|
6月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的防疫物资管理信息系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的防疫物资管理信息系统附带文章源码部署视频讲解等
36 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的高校毕业生就业信息系统小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的高校毕业生就业信息系统小程序附带文章源码部署视频讲解等
54 2
|
6月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的美食信息推荐系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的美食信息推荐系统附带文章源码部署视频讲解等
61 16
|
6月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的微服务的车联网位置信息管理附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的微服务的车联网位置信息管理附带文章源码部署视频讲解等
50 1
|
6月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的高校毕业生就业信息系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的高校毕业生就业信息系统附带文章源码部署视频讲解等
39 2
|
6月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的机电公司管理信息系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的机电公司管理信息系统附带文章源码部署视频讲解等
33 1