小程序裏顯示附近的(de)人(rén)，雲開發數據庫實現附近的(de)人(rén)，按照位置遠近排序，附近多少公裏内 ...

發表時(shí)間：2022-7-26

發布人(rén)：融晨科技

浏覽次數：37

最近好多同學問石頭哥附近的(de)人(rén)如何實現。今天呢，就(jiù)借助這(zhè)篇文章，給大(dà)家做一個(gè)系統的(de)解答。

老規矩，先看效果圖

可以(yǐ)看到(dào)我們在(zài)地(dì / de)圖上(shàng)顯示了(le／liǎo)附近的(de)一些标記點。

接下來(lái)就(jiù)教大(dà)家如何實現附近的(de)位置。

一，創建數據

首先我們查詢附近的(de)人(rén)的(de)時(shí)候，需要(yào / yāo)先有附近人(rén)的(de)位置，也(yě)就(jiù)是(shì)經緯度。這(zhè)裏我以(yǐ)幾個(gè)城市的(de)經緯度爲(wéi / wèi)例。

大(dà)家可以(yǐ)自行百度查找你所需要(yào / yāo)的(de)經緯度。
這(zhè)裏經緯度查到(dào)後，我們需要(yào / yāo)把這(zhè)些位置信息存到(dào)數據庫裏。

1，注意存位置時(shí)必須是(shì)Point類型

如上(shàng)圖所示，我們可以(yǐ)直接在(zài)雲開發數據庫裏添加位置信息，類型是(shì)geopoint類型。
如我添加的(de)北京的(de)位置如下

這(zhè)裏按照這(zhè)樣的(de)類型，自己多添加幾個(gè)城市的(de)經緯度。當然現實開發中，應該是(shì)添加附近人(rén)的(de)位置(經緯度)

2，批量添加(選看)

如果感覺一個(gè)添加比較麻煩的(de)話，可以(yǐ)先添加一條，然後導出(chū)爲(wéi / wèi)json，自己在(zài)json裏批量編輯。

一定要(yào / yāo)注意_id不(bù)能重複，格式要(yào / yāo)保持一緻。這(zhè)樣你批量編輯後，再把這(zhè)個(gè)json重新導入到(dào)數據即可。

批量導入不(bù)是(shì)本節的(de)重點，就(jiù)不(bù)在(zài)講解。我這(zhè)裏默認你已經添加好位置信息了(le／liǎo)

二，查找附近的(de)人(rén)

我們查找附近的(de)人(rén)，肯定是(shì)想按照排序由近到(dào)遠的(de)顯示附近的(de)人(rén)在(zài)地(dì / de)圖上(shàng)，所以(yǐ)這(zhè)裏我們就(jiù)要(yào / yāo)用到(dào)geoNear做聚合查詢。
geonear查詢有兩種方式，建議大(dà)家用Aggregate.geoNear

詳細介紹大(dà)家可以(yǐ)自己去看官方文檔
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/aggregate/Aggregate.geoNear.html
用這(zhè)個(gè)的(de)主要(yào / yāo)好處是(shì)，我們可以(yǐ)拿到(dào)附近人(rén)離自己的(de)距離

這(zhè)個(gè)距離在(zài)做附近的(de)人(rén)時(shí)很重要(yào / yāo)的(de)。既然可以(yǐ)直接拿到(dào)，能省很多事的(de)。具體的(de)代碼後面給大(dà)家列出(chū)來(lái)，我們先繼續往下學習

三，獲取當前的(de)位置

我們要(yào / yāo)做附近的(de)人(rén)肯定要(yào / yāo)先獲取自己的(de)位置，獲取自己的(de)位置就(jiù)用wx.getLocation即可，對應文檔如下
https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html
這(zhè)個(gè)使用之(zhī)前必須要(yào / yāo)在(zài)app.json裏注冊權限，如果不(bù)注冊權限，就(jiù)會報如下提示

所以(yǐ)在(zài)app.json裏寫如下代碼

四，獲取附近人(rén)的(de)經緯度

代碼其實很簡單，如下

這(zhè)樣我們就(jiù)可以(yǐ)按照由近到(dào)遠的(de)順序獲取附近的(de)人(rén)了(le／liǎo)，結果如下

石頭哥是(shì)在(zài)杭州，可以(yǐ)看到(dào)幾個(gè)城市裏離杭州最近的(de)是(shì)上(shàng)海159公裏的(de)距離。

五，在(zài)地(dì / de)圖上(shàng)顯示附近的(de)人(rén)

既然位置都已經查詢到(dào)了(le／liǎo)，我們就(jiù)可以(yǐ)在(zài)地(dì / de)圖上(shàng)顯示了(le／liǎo)，地(dì / de)圖上(shàng)顯示用到(dào)了(le／liǎo)map組件的(de)markers

對應的(de)js代碼如下

下面我把完整的(de)代碼貼出(chū)來(lái)給到(dào)大(dà)家

wxml代碼

<map markers="{{markers}}" show-location scale="4" 
style="height: 100vh;" />

js代碼

Page({
  data: {
    markers: []
  },
  onLoad() {
    wx.getLocation({ //1，獲取自己的(de)位置
      type: 'wgs84',
      success: res => {
        const latitude = res.latitude
        const longitude = res.longitude
        console.log('當前在(zài)杭州的(de)經緯度', res.longitude, res.latitude)
        //2，查找附近的(de)人(rén)
        let markers = []
        const db = wx.cloud.database()
        const $ = db.command.aggregate
        db.collection('location').aggregate()
          .geoNear({
            distanceField: 'juli', // 與給定點的(de)距離
            spherical: true,
            near: db.Geo.Point(longitude, latitude), //當前自己的(de)位置
          }).end()
          .then(res => {
            console.log('位置', res)
            res.list.forEach(item => {
              markers.push({
                longitude: item.location.coordinates[0],
                latitude: item.location.coordinates[1]
              })
            })
            // 地(dì / de)圖上(shàng)的(de)标記點
            this.setData({
              markers
            })
          })
      }
    })
  }
})