The function of nearby people in the applet is realized, and the cloud development database is used to realize nearby people and friends within a distance of the neighborhood

There is a source code at the end of the article

Recently, many students asked people near brother Shitou how to realize . What about today , With the help of this article , Give you a systematic answer .

Old rules , Look at the renderings first

You can see that we show some nearby marker points on the map .

Next, I'll teach you how to realize the nearby location .

One , Create data

First, when we query people nearby , You need to have someone nearby first , That is, longitude and latitude . Here I take the longitude and latitude of several cities as an example .

You can find the longitude and latitude you need by Baidu .

When we find the latitude and longitude here , We need to store this location information in the database .

1, Note that the storage location must be Point type

As shown in the figure above , We can add location information directly to the cloud development database , The type is geopoint type .

As I added, the location of Beijing is as follows

Here according to this type , Add more longitude and latitude of several cities . Of course, in real development , It should be a place to add people nearby ( Longitude and latitude )

2, Batch addition ( Choose to see )

If it's troublesome to add one , You can add one first , Then export to json, in json Batch editing in .

Be sure to pay attention to _id Can't repeat , The format should be consistent . So after you edit in batch , Put this again. json Re import to data .

Batch import is not the focus of this section , I'm not explaining . By default, you have added location information

3, Modify data table permissions

We want everyone to read the data here , The permissions must be set as follows

4, Create an index of the corresponding field (** important )

If we want to find location information , The index corresponding to the corresponding field of the storage location must be set .

If you don't create an index, query directly , The following errors will be reported .

So we must first create the corresponding index . Add the index as shown in the figure below

Then make the following settings

The preparations will be finished here .

Two , Look for people nearby

We look for people nearby , I must want to show people nearby on the map in order from near to far , So here we are going to use geoNear Do aggregate query .

geonear There are two ways to query , I suggest you use Aggregate.geoNear

You can read the official documents by yourself

https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/aggregate/Aggregate.geoNear.html

The main advantage of using this is , We can get the distance from nearby people to ourselves

This distance is very important when you are a nearby person . Since you can get it directly , Can save a lot of things . The specific code will be listed later , Let's continue our study first

3、 ... and , Get the current location

If we want to be people nearby, we must get our position first , Get your own location with wx.getLocation that will do , The corresponding documents are as follows

https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html

This must be used before app.json Register permissions in , If you don't register permissions , The following prompt will be reported

So in app.json Write the following code in

  "permission": {
    "scope.userLocation": {
      "desc": " Get the permissions required for the location "
    }
  }

Four , Get the longitude and latitude of people nearby

The code is very simple , as follows

So we can get people nearby in order from near to far , give the result as follows

Brother stone is in Hangzhou , You can see that Shanghai is the nearest city to Hangzhou 159 Kilometer distance .

5、 ... and , Show people nearby on the map

Now that the location has been found , We can show it on the map , The map shows that map Component's markers

Corresponding js The code is as follows

Now I will post the complete code to you

wxml Code

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

js Code

Page({
  data: {
    markers: []
  },
  onLoad() {
    wx.getLocation({ //1, Get your place 
      type: 'wgs84',
      success: res => {
        const latitude = res.latitude
        const longitude = res.longitude
        console.log(' The current longitude and latitude in Hangzhou ', res.longitude, res.latitude)
        //2, Look for people nearby 
        let markers = []
        const db = wx.cloud.database()
        const $ = db.command.aggregate
        db.collection('location').aggregate()
          .geoNear({
            distanceField: 'juli', //  Distance from a given point 
            spherical: true,
            near: db.Geo.Point(longitude, latitude), // Your current position 
          }).end()
          .then(res => {
            console.log(' Location ', res)
            res.list.forEach(item => {
              markers.push({
                longitude: item.location.coordinates[0],
                latitude: item.location.coordinates[1]
              })
            })
            //  Mark points on the map 
            this.setData({
              markers
            })
          })
      }
    })
  }
})

Okay , Here we will take you to complete the function of displaying nearby people on the map . If you think brother stone's article is good , Welcome to pay attention to like .