有奖捉虫:办公协同&微信生态&物联网文档专题 HOT
在微信小程序开发过程中经常会遇到要求“显示用户当前位置到目标位置的距离”的需求,例如:用户检索出某品牌商铺,系统会按照由近及远排列显示用户到当前城市各商铺的距离信息,供用户选择导航。实现这类场景的逻辑主要分为两部分:
获取当前用户位置经纬度数据信息。
调用腾讯地图位置服务官方接口 批量距离计算 实现从当前位置到目标位置的批量距离计算。
通过微搭低代码平台来实现该功能:首先用户需要在微搭低代码平台上注册认证小程序,不熟悉的用户可以参见微搭官网 快速注册小程序 ;接下来使用微搭获取用户当前位置经纬度数据信息,不熟悉的用户可以参见微单官网 小程序中获取当前位置信息;最后调用微搭自定义 APIs 实现距离批量计算。这里我们主要讲解如何实现小程序批量计算示例信息。

操作步骤

步骤1:创建地图 APIs

1. 新建 APIs,开放服务选择腾讯地图



2. 输入自定义 APIs 的名称、标识以及 API KEY



3. 其中 API KEY 需要前往腾讯位置服务进行申请。大致步骤是注册账号并登录腾讯位置服务控制台,然后在我的应用中创建一个应用,并获取 API KEY。具体操作可前往 腾讯位置服务 网站实现。



4. APIs 创建成功后,可以看到各种地图服务方法,逆地址解析使用的是批量距离矩阵计算方法,该方法的说明可以参见官网 WebService API 文档。

步骤2:创建数据表存储目标位置

1. 创建数据表:目标位置,字段包括名称、地址、纬度、经度等字段用于存储目标位置数据信息。注意经纬度数据类型必须是数字。



2. 打开管理数据,向数据表中添加位置数据信息。这里的示例数据我们通过 腾讯地图位置服务拾取功能 获取目标位置的经纬度坐标数据。




步骤3:创建计算距离 APIs

1. 新建 APIs,选择自定义代码



2. 名称为计算当前位置到目标位置的距离



3. 创建 APIs 方法 getDistance 用于计算当前位置到目标位置的距离。



方法参数:
排序方式排序字段名称每页大小页码经度(当前位置)、纬度(当前位置)。



方法逻辑:
3.1.1 分页查询数据库,获取目标位置数据表中的名称、地址、经纬度数据等。
3.1.2 将数据表中的经纬度数据整理成目标位置的经纬度数组。
3.1.3 使用地图 APIs 的批量距离矩阵计算方法计算出当前位置到目标位置的距离。
3.1.4 将计算出来的距离作为 distance 的属性值,添加到查询出来的目标位置数组中。
3.1.5 对目标位置数组进行排序。
代码如下:
module.exports = async function (params, context) {
// 查询数据库
const info = await context.callModel ({
name: 'mbwz_tpg864x', // 数据模型标识
methodName: 'wedaGetRecords', // 数据模型方法标识
params: {
'pageSize':params.pageSize,
'pageNo':params.pageNo
}, // 数据模型方法的入参
});

// 获取目标位置经纬度数据
let to = info.records.map(item=>{
return item.wd + ',' + item.jd;
})

// 计算距离
const result = await context.callConnector ({
name: 'txdt_rm7dic1', // 数据模型标识
methodName: 'distanceMatrix', // 数据模型方法标识
params: {
'to': to.join(';'), // 用“;”分割数组并转换成字符串
'from': params.latitude+','+params.longitude,
'mode': 'walking'
}, // 数据模型方法的入参
});

// 添加距离属性
for(var i = 0 ; i < info.records.length ; i++){
// 添加属性和值
info.records[i].distance = result.result.rows[0].elements[i].distance
}

//排序
info.records.sort(function(a,b){
if("desc" === params.orderType){
return a[params.orderBy] - b[params.orderBy]
}else{
return b[params.orderBy] - a[params.orderBy]
}
})

// 这里返回数据,和出参结构映射
return info;

};

步骤4:创建变量存储当前位置经纬度

如何在小程序中获取当前位置经纬度数据可以参见微搭官网文档 小程序中获取当前位置信息,这里就不详细介绍。
创建变量 latitudelongitude 用来存储当前位置的纬度和经度,为验证计算距离给变量 latitude 赋予默认值“39.905903”,给变量 longitude 赋予默认值“116.341392”,作为当前位置的经纬度示例数据。




步骤5:目标位置显示及距离显示

在页面中添加数据列表组件,数据源选择 APIs,APIs 选择计算当前位置到目标位置的距离,调用方法选择 getDistance,查询入参的排序字段名称设置为 distance,排序方式设置为 desc,经度通过表达式绑定变量 longitude 即 $page.dataset.state.longitude,纬度通过表达式绑定变量 latitude 即 $page.dataset.state.latitude



数据列表组件中第一个文本组件的文本内容通过绑定表达式选择数据字段 mc 即 $w.item_listView1.mc



数据列表组件中第二个文本组件的文本内容通过绑定表达式选择数据字段 dz 即 $w.item_listView1.dz



数据列表组件中第三个文本组件的文本内容通过绑定表达式选择数据字段 distance 即 $w.item_listView1.distance,在 distance 后面再添加字符串“米”作为单位,最终绑定表达式为 $w.item_listView1.distance + "米"




步骤6:预览效果

最终预览效果如下图: