文末有源碼

最近好多同學(xué)問石頭哥附近的人如何實現(xiàn)。今天呢，就借助這篇文章，給大家做一個系統(tǒng)的解答。

老規(guī)矩，先看效果圖

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

接下來就教大家如何實現(xiàn)附近的位置。

一，創(chuàng)建數(shù)據(jù)

首先我們查詢附近的人的時候，需要先有附近人的位置，也就是經(jīng)緯度。這里我以幾個城市的經(jīng)緯度為例。

大家可以自行百度查找你所需要的經(jīng)緯度。
這里經(jīng)緯度查到后，我們需要把這些位置信息存到數(shù)據(jù)庫里。

1，注意存位置時必須是Point類型

如上圖所示，我們可以直接在云開發(fā)數(shù)據(jù)庫里添加位置信息，類型是geopoint類型。
如我添加的北京的位置如下

這里按照這樣的類型，自己多添加幾個城市的經(jīng)緯度。當然現(xiàn)實開發(fā)中，應(yīng)該是添加附近人的位置(經(jīng)緯度)

2，批量添加(選看)

如果感覺一個添加比較麻煩的話，可以先添加一條，然后導(dǎo)出為json，自己在json里批量編輯。

一定要注意_id不能重復(fù)，格式要保持一致。這樣你批量編輯后，再把這個json重新導(dǎo)入到數(shù)據(jù)即可。

批量導(dǎo)入不是本節(jié)的重點，就不在講解。我這里默認你已經(jīng)添加好位置信息了

3，修改數(shù)據(jù)表權(quán)限

我們這里要讓所有人可以讀取到數(shù)據(jù)，必須設(shè)置權(quán)限如下

4，創(chuàng)建對應(yīng)字段的索引(**重要)

我們?nèi)绻氩檎椅恢眯畔?，必須設(shè)置存位置的對應(yīng)字段對應(yīng)的索引才可以。
如果不創(chuàng)建索引直接查詢，會報如下錯誤。

所以我們必須要先創(chuàng)建對應(yīng)的索引。如下圖所示添加索引

然后做如下設(shè)置即可

到這里準備工作就做完了。

二，查找附近的人

我們查找附近的人，肯定是想按照排序由近到遠的顯示附近的人在地圖上，所以這里我們就要用到geoNear做聚合查詢。
geonear查詢有兩種方式，建議大家用Aggregate.geoNear

詳細介紹大家可以自己去看官方文檔
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/aggregate/Aggregate.geoNear.html
用這個的主要好處是，我們可以拿到附近人離自己的距離

這個距離在做附近的人時很重要的。既然可以直接拿到，能省很多事的。具體的代碼后面給大家列出來，我們先繼續(xù)往下學(xué)習(xí)

三，獲取當前的位置

我們要做附近的人肯定要先獲取自己的位置，獲取自己的位置就用wx.getLocation即可，對應(yīng)文檔如下
https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html
這個使用之前必須要在app.json里注冊權(quán)限，如果不注冊權(quán)限，就會報如下提示

所以在app.json里寫如下代碼

?"permission": { ? ?"scope.userLocation": { ? ? ?"desc": "獲取位置所需要的權(quán)限" ? ?} ?}

四，獲取附近人的經(jīng)緯度

代碼其實很簡單，如下

這樣我們就可以按照由近到遠的順序獲取附近的人了，結(jié)果如下

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

五，在地圖上顯示附近的人

既然位置都已經(jīng)查詢到了，我們就可以在地圖上顯示了，地圖上顯示用到了map組件的markers

對應(yīng)的js代碼如下

好了，到這里就帶大家完整的實現(xiàn)了地圖上顯示附近人的功能了。如果覺得石頭哥文章還不錯，歡迎關(guān)注點贊。