小程序里顯示附近的人，云開發數據庫實現附近的人，按照位置遠近排序，附近多少公里內 ...
發表時間：2022-7-26
發布人：葵宇科技
瀏覽次數：10
最近好多同學問石頭哥附近的人如何實現。今天呢，就借助這篇文章，給大家做一個系統的解答。
老規矩，先看效果圖
接下來就教大家如何實現附近的位置。
一，創建數據
首先我們查詢附近的人的時候，需要先有附近人的位置，也就是經緯度。這里我以幾個城市的經緯度為例。
這里經緯度查到后，我們需要把這些位置信息存到數據庫里。
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
})
})
}
})
}
})
好了，到這里就帶大家完整的實現了地圖上顯示附近人的功能了。如果覺得石頭哥文章還不錯，歡迎關注點贊。
