编程小石头 潜水
  • 0发帖数
  • 0主题数
  • 0关注数
  • 0粉丝
开启左侧

小程序里附近的人功能实现,按照位置远近排序

[复制链接]
编程小石头 发表于 2022-2-8 05:35:30 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
文末有源码

最近好多同学问石头哥附近的人如何实现。今天呢,就借助这篇文章,给大家做一个体系的解答。
老规矩,先看结果图


                               
登录/注册后可看大图


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

接下来就教大家如何实现附近的位置。
一,创建数据

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

                               
登录/注册后可看大图


大家可以自行百度查找你所必要的经纬度。
这里经纬度查到后,我们必要把这些位置信息存到数据库里。

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


                               
登录/注册后可看大图


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


                               
登录/注册后可看大图


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

2,批量添加(选看)

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

                               
登录/注册后可看大图


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


                               
登录/注册后可看大图


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

3,修改数据表权限

我们这里要让所有人可以读取到数据,必须设置权限如下

                               
登录/注册后可看大图

4,创建对应字段的索引(**紧张)

我们如果想查找位置信息,必须设置存位置的对应字段对应的索引才可以。
如果不创建索引直接查询,会报如下错误。


                               
登录/注册后可看大图


以是我们必须要先创建对应的索引。如下图所示添加索引


                               
登录/注册后可看大图


然后做如下设置即可


                               
登录/注册后可看大图


到这里准备工作就做完了。

二,查找附近的人

我们查找附近的人,肯定是想按照排序由近到远的显示附近的人在地图上,以是这里我们就要用到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代码

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            })          })      }    })  }})好了,到这里就带大家完备的实现了地图上显示附近人的功能了。如果以为石头哥文章还不错,欢迎关注点赞。

精彩评论2

我竟然是数字用户 发表于 2021-8-27 09:07:16 | 显示全部楼层
转发了
笑道君 发表于 2021-8-24 18:35:17 | 显示全部楼层
转发了
猜你喜欢
在线客服邮箱
wxcy#wkgb.net

邮箱地址#换为@

Powered by 创意电子 ©2018-现在 专注资源实战分享源码下载站联盟商城