小程序里显示附近的人,云开发数据库实现附近的人,按照位置远近排序,附近多少公里内的好友

简介: 小程序里显示附近的人,云开发数据库实现附近的人,按照位置远近排序,附近多少公里内的好友

老规矩,先看效果图


可以看到我们在地图上显示了附近的一些标记点。


接下来就教大家如何实现附近的位置。


一,创建数据


首先我们查询附近的人的时候,需要先有附近人的位置,也就是经纬度。这里我以几个城市的经纬度为例。

大家可以自行百度查找你所需要的经纬度。

这里经纬度查到后,我们需要把这些位置信息存到数据库里。


1,注意存位置时必须是Point类型


如上图所示,我们可以直接在云开发数据库里添加位置信息,类型是geopoint类型。

如我添加的北京的位置如下

这里按照这样的类型,自己多添加几个城市的经纬度。当然现实开发中,应该是添加附近人的位置(经纬度)


2,批量添加(选看)


如果感觉一个添加比较麻烦的话,可以先添加一条,然后导出为json,自己在json里批量编辑。

一定要注意_id不能重复,格式要保持一致。这样你批量编辑后,再把这个json重新导入到数据即可。

批量导入不是本节的重点,就不在讲解。我这里默认你已经添加好位置信息了


二,查找附近的人


我们查找附近的人,肯定是想按照排序由近到远的显示附近的人在地图上,所以这里我们就要用到geoNear做聚合查询。

geonear查询有两种方式,建议大家用Aggregate.geoNear

详细介绍大家可以自己去看官方文档

https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/aggregate/Aggregate.geoNear.html

用这个的主要好处是,我们可以拿到附近人离自己的距离

这个距离在做附近的人时很重要的。既然可以直接拿到,能省很多事的。具体的代码后面给大家列出来,我们先继续往下学习


三,获取当前的位置


我们要做附近的人肯定要先获取自己的位置,获取自己的位置就用wx.getLocation即可,对应文档如下

https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html

这个使用之前必须要在app.json里注册权限,如果不注册权限,就会报如下提示

所以在app.json里写如下代码


"permission": {
    "scope.userLocation": {
      "desc": "获取位置所需要的权限"
    }
  }


四,获取附近人的经纬度


代码其实很简单,如下

这样我们就可以按照由近到远的顺序获取附近的人了,结果如下

石头哥是在杭州,可以看到几个城市里离杭州最近的是上海159公里的距离。


五,在地图上显示附近的人


既然位置都已经查询到了,我们就可以在地图上显示了,地图上显示用到了map组件的markers

对应的js代码如下

下面我把完整的代码贴出来给到大家


wxml代码

<map markers="{{markers}}" show-location scale="4" 
style="height: 100vh;" />

js代码

Page({
  data: {
    markers: []
  },
  onLoad() {
    wx.getLocation({ //1,获取自己的位置
      type: 'wgs84',
      success: res => {
        const latitude = res.latitude
        const longitude = res.longitude
        console.log('当前在杭州的经纬度', res.longitude, res.latitude)
        //2,查找附近的人
        let markers = []
        const db = wx.cloud.database()
        const $ = db.command.aggregate
        db.collection('location').aggregate()
          .geoNear({
            distanceField: 'juli', // 与给定点的距离
            spherical: true,
            near: db.Geo.Point(longitude, latitude), //当前自己的位置
          }).end()
          .then(res => {
            console.log('位置', res)
            res.list.forEach(item => {
              markers.push({
                longitude: item.location.coordinates[0],
                latitude: item.location.coordinates[1]
              })
            })
            // 地图上的标记点
            this.setData({
              markers
            })
          })
      }
    })
  }
})

好了,到这里就带大家完整的实现了地图上显示附近人的功能了。如果觉得石头哥文章还不错,欢迎关注点赞。


相关文章
预约按摩小程序开发,为什么很多上门按摩平台根本招聘不到优秀技师?
上门按摩平台面临招不到优秀技师的问题,主要原因是平台众多,技师选择多样。为解决此问题,平台可引入技师等级制度,根据订单数量和好评率划分高、低等级技师。高等级技师可享受70%-90%的高提成及首页推荐,这不仅能激励技师的积极性,还能帮助平台筛选出优质技师,提升服务质量和口碑,形成良性循环。
|
6天前
|
人工智能 小程序
【一步步开发AI运动小程序】十五、AI运动识别中,如何判断人体站位的远近?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,无需后台支持,具有快速、体验好、易集成等特点。本文介绍如何利用插件判断人体与摄像头的远近,确保人体图像在帧内的比例适中,以优化识别效果。通过`whole`检测规则,分别实现人体过近和过远的判断,并给出相应示例代码。
|
5天前
|
人工智能 小程序 UED
【一步步开发AI运动小程序】十六、AI运动识别中,如何判断人体站位?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,本地引擎无需后台支持,具备快速、体验好、易集成等优势。本文介绍如何利用插件的`camera-view`功能,通过检测人体站位视角(前、后、左、右),确保运动时的最佳识别率和用户体验。代码示例展示了如何实现视角检查,确保用户正或背对摄像头,为后续运动检测打下基础。
|
18天前
|
人工智能 小程序 IDE
【一步步开发AI运动小程序】九、姿态辅助调试桌面工具的使用
随着AI技术的发展,各大厂商推出的AI运动APP如“乐动力”、“天天跳绳”等,使云上运动会、线上健身等概念大热。本文将指导你如何利用“云智AI运动识别小程序插件”,在微信小程序中实现类似功能,包括工具搭建、服务启动及数据回传等步骤,助力开发者高效开发AI运动小程序。
【一步步开发AI运动小程序】九、姿态辅助调试桌面工具的使用
|
11天前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十三、自定义一个运动分析器,实现计时计数02
本文介绍如何利用“云智AI运动识别小程序插件”开发AI运动小程序,详细解析了俯卧撑动作的检测规则构建与执行流程,涵盖卧撑和撑卧两个姿态的识别规则,以及如何通过继承`sports.SportBase`类实现运动分析器,适用于小程序开发者。
|
11天前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十二、自定义一个运动分析器,实现计时计数01
随着AI技术的发展,AI运动APP如雨后春笋般涌现,如“乐动力”、“天天跳绳”等,推动了云上运动会、线上健身等热潮。本文将指导你从零开始开发一个AI运动小程序,利用“云智AI运动识别小程序插件”,介绍运动识别原理、计量方式及运动分析器基类的使用,帮助你在小程序中实现运动计时和计数功能。下篇将继续探讨运动姿态检测规则的编写。
|
4天前
|
移动开发 小程序 PHP
校园圈子论坛系统采取的PHP语音和uni账号开发的小程序APP公众号H5是否只需要4800元?是的,就是只需要4800元
关于校园圈子论坛系统采用PHP语言和uni-app开发的小程序、APP、公众号和H5是否仅需4800元这个问题,实际上很难给出一个确定的答案。这个价格可能受到多种因素的影响
|
21天前
|
人工智能 JSON 小程序
【一步步开发AI运动小程序】八、利用body-calc进行姿态识别
随着AI技术的发展,各大厂商推出的如“乐动力”、“天天跳绳”等AI运动APP,使得云上运动会、线上健身等概念风靡一时。本文将引导读者从零开始开发一个AI运动小程序,使用“云智AI运动识别小程序插件”,介绍人体姿态检测规则、规则编写语法、执行检测规则运算及姿态检测实战等内容,助力开发者轻松实现AI运动小程序的开发。
【一步步开发AI运动小程序】八、利用body-calc进行姿态识别
|
13天前
|
数据采集 人工智能 小程序
【一步步开发AI运动小程序】十、姿态动作相似度比较
本文介绍如何利用“云智AI运动识别小程序插件”开发AI运动小程序,重点讲解姿态动作相似度比较功能的运用,包括样本动作帧的采集和姿态相似度的计算方法,以及在组合运动中的应用实例。
|
6天前
|
人工智能 小程序 JavaScript
【一步步开发AI运动小程序】十四、主包超出2M大小限制,如何将插件分包发布?
本文介绍了如何从零开始开发一个AI运动小程序,重点讲解了通过分包技术解决程序包超过2M限制的问题。详细步骤包括在uni-app中创建分包、配置`manifest.json`和`pages.json`文件,并提供了分包前后代码大小对比,帮助开发者高效实现AI运动功能。