最近好多同學問石頭哥附近的人如何實作。今天呢,就借助這篇文章,給大家做一個系統的解答。
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsISPrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdsAjMfd3bkFGazxCMx8VesATMfhHLlN3XnxCMwEzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsQTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cmbw5SYidTYyYTYwMTY1ImYzcjY1YzMzYDOkRjZ4MGOlFGNk9CX0IzLchDMxIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjL0M3Lc9CX6MHc0RHaiojIsJye.png)
可以看到我們在地圖上顯示了附近的一些标記點。
接下來就教大家如何實作附近的位置。
首先我們查詢附近的人的時候,需要先有附近人的位置,也就是經緯度。這裡我以幾個城市的經緯度為例。
大家可以自行百度查找你所需要的經緯度。
這裡經緯度查到後,我們需要把這些位置資訊存到資料庫裡。
如上圖所示,我們可以直接在雲開發資料庫裡添加位置資訊,類型是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代碼如下
下面我把完整的代碼貼出來給到大家
好了,到這裡就帶大家完整的實作了地圖上顯示附近人的功能了。如果覺得石頭哥文章還不錯,歡迎關注點贊。