小程序里显示附近的人,云开发数据库实现附近的人,按照位置远近排序,附近多少公里内 ...
发表时间:2022-7-26
发布人:葵宇科技
浏览次数:36
最近好多同学问石头哥附近的人如何实现。今天呢,就借助这篇文章,给大家做一个系统的解答。
老规矩,先看效果图
接下来就教大家如何实现附近的位置。
一,创建数据
首先我们查询附近的人的时候,需要先有附近人的位置,也就是经纬度。这里我以几个城市的经纬度为例。
这里经纬度查到后,我们需要把这些位置信息存到数据库里。
1,注意存位置时必须是Point类型
如我添加的北京的位置如下
2,批量添加(选看)
如果感觉一个添加比较麻烦的话,可以先添加一条,然后导出为json,自己在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里注册权限,如果不注册权限,就会报如下提示

四,获取附近人的经纬度
代码其实很简单,如下
五,在地图上显示附近的人
既然位置都已经查询到了,我们就可以在地图上显示了,地图上显示用到了map组件的markers
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
})
})
}
})
}
})
好了,到这里就带大家完整的实现了地图上显示附近人的功能了。如果觉得石头哥文章还不错,欢迎关注点赞。