天天看點

小程式裡附近的人功能實作,雲開發資料庫實作附近的人,按照位置遠近排序,附近多少公裡内的好友

最近好多同學問石頭哥附近的人如何實作。今天呢,就借助這篇文章,給大家做一個系統的解答。

小程式裡附近的人功能實作,雲開發資料庫實作附近的人,按照位置遠近排序,附近多少公裡内的好友

可以看到我們在地圖上顯示了附近的一些标記點。

接下來就教大家如何實作附近的位置。

首先我們查詢附近的人的時候,需要先有附近人的位置,也就是經緯度。這裡我以幾個城市的經緯度為例。

小程式裡附近的人功能實作,雲開發資料庫實作附近的人,按照位置遠近排序,附近多少公裡内的好友

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

這裡經緯度查到後,我們需要把這些位置資訊存到資料庫裡。

小程式裡附近的人功能實作,雲開發資料庫實作附近的人,按照位置遠近排序,附近多少公裡内的好友

如上圖所示,我們可以直接在雲開發資料庫裡添加位置資訊,類型是geopoint類型。

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

小程式裡附近的人功能實作,雲開發資料庫實作附近的人,按照位置遠近排序,附近多少公裡内的好友

這裡按照這樣的類型,自己多添加幾個城市的經緯度。當然現實開發中,應該是添加附近人的位置(經緯度)

如果感覺一個添加比較麻煩的話,可以先添加一條,然後導出為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裡寫如下代碼

小程式裡附近的人功能實作,雲開發資料庫實作附近的人,按照位置遠近排序,附近多少公裡内的好友

代碼其實很簡單,如下

小程式裡附近的人功能實作,雲開發資料庫實作附近的人,按照位置遠近排序,附近多少公裡内的好友

這樣我們就可以按照由近到遠的順序擷取附近的人了,結果如下

小程式裡附近的人功能實作,雲開發資料庫實作附近的人,按照位置遠近排序,附近多少公裡内的好友

石頭哥是在杭州,可以看到幾個城市裡離杭州最近的是上海159公裡的距離。

既然位置都已經查詢到了,我們就可以在地圖上顯示了,地圖上顯示用到了map元件的markers

小程式裡附近的人功能實作,雲開發資料庫實作附近的人,按照位置遠近排序,附近多少公裡内的好友

對應的js代碼如下

小程式裡附近的人功能實作,雲開發資料庫實作附近的人,按照位置遠近排序,附近多少公裡内的好友

下面我把完整的代碼貼出來給到大家

好了,到這裡就帶大家完整的實作了地圖上顯示附近人的功能了。如果覺得石頭哥文章還不錯,歡迎關注點贊。