The function of nearby people in the applet is realized, and the cloud development database realizes the nearby people, sorted according to the distance of the location, and the friends within how many kilometers nearby

Time:2022-1-7

Recently, many students asked people near brother Shitou how to achieve it. Today, with the help of this article, I will give you a systematic answer.

Old rule, look at the renderings first

The function of nearby people in the applet is realized, and the cloud development database realizes the nearby people, sorted according to the distance of the location, and the friends within how many kilometers nearby

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

Next, I’ll teach you how to achieve a nearby location.

1、 Create data

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

The function of nearby people in the applet is realized, and the cloud development database realizes the nearby people, sorted according to the distance of the location, and the friends within how many kilometers nearby

You can find the longitude and latitude you need by Baidu.
After finding the longitude and latitude here, we need to store these location information in the database.

1. Note that the storage location must be of point type

The function of nearby people in the applet is realized, and the cloud development database realizes the nearby people, sorted according to the distance of the location, and the friends within how many kilometers nearby

As shown in the figure above, we can directly add location information in the cloud development database. The type is geopoint.
As I added, the location of Beijing is as follows

The function of nearby people in the applet is realized, and the cloud development database realizes the nearby people, sorted according to the distance of the location, and the friends within how many kilometers nearby

Here, according to this type, you can add more longitude and latitude of several cities. Of course, in real development, the location (longitude and latitude) of nearby people should be added

2. Batch addition (optional)

If you feel it is troublesome to add one, you can add one first, then export it as JSON, and edit it in JSON in batches.

The function of nearby people in the applet is realized, and the cloud development database realizes the nearby people, sorted according to the distance of the location, and the friends within how many kilometers nearby

Be careful_ ID cannot be repeated, and the format must be consistent. In this way, you can re import the JSON into the data after batch editing.

The function of nearby people in the applet is realized, and the cloud development database realizes the nearby people, sorted according to the distance of the location, and the friends within how many kilometers nearby

Batch import is not the focus of this section, so it will not be explained. By default, you have added location information here

3. Modify data table permissions

In order for everyone to read the data, we must set the permissions as follows

The function of nearby people in the applet is realized, and the cloud development database realizes the nearby people, sorted according to the distance of the location, and the friends within how many kilometers nearby

4. Create the index of the corresponding field (* * important)

If we want to find location information, we must set the index corresponding to the corresponding field of the storage location.
If you query directly without creating an index, the following error will be reported.

The function of nearby people in the applet is realized, and the cloud development database realizes the nearby people, sorted according to the distance of the location, and the friends within how many kilometers nearby

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

The function of nearby people in the applet is realized, and the cloud development database realizes the nearby people, sorted according to the distance of the location, and the friends within how many kilometers nearby

Then make the following settings

The function of nearby people in the applet is realized, and the cloud development database realizes the nearby people, sorted according to the distance of the location, and the friends within how many kilometers nearby

The preparations will be finished here.

2、 Find people nearby

When we search for people nearby, we must want to display people nearby on the map from near to far, so we need to use geonear for aggregate query.
There are two ways to query gear. It is recommended to use aggregate geoNear

The function of nearby people in the applet is realized, and the cloud development database realizes the nearby people, sorted according to the distance of the location, and the friends within how many kilometers nearby

Detailed introduction, you can see the official documents yourself
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/aggregate/Aggregate.geoNear.html
The main advantage of using this is that we can get the distance from nearby people to ourselves

The function of nearby people in the applet is realized, and the cloud development database realizes the nearby people, sorted according to the distance of the location, and the friends within how many kilometers nearby

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

3、 Get current location

If we want to be people nearby, we must get our own position first. To get our own position, use Wx Getlocation. The corresponding documents are as follows
https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html
This must be in app before use Register permissions in JSON. If you do not register permissions, the following prompt will be reported

The function of nearby people in the applet is realized, and the cloud development database realizes the nearby people, sorted according to the distance of the location, and the friends within how many kilometers nearby

So in app JSON write the following code

"permission": {
    "scope.userLocation": {
      "Desc": "obtaining permissions required for a location"
    }
  }
The function of nearby people in the applet is realized, and the cloud development database realizes the nearby people, sorted according to the distance of the location, and the friends within how many kilometers nearby

4、 Get the longitude and latitude of nearby people

The code is actually very simple, as follows

The function of nearby people in the applet is realized, and the cloud development database realizes the nearby people, sorted according to the distance of the location, and the friends within how many kilometers nearby

In this way, we can get people nearby in order from near to far. The results are as follows

The function of nearby people in the applet is realized, and the cloud development database realizes the nearby people, sorted according to the distance of the location, and the friends within how many kilometers nearby

Stone brother is in Hangzhou. You can see that the nearest city to Hangzhou is Shanghai, 159 kilometers away.

5、 Show people nearby on the map

Now that the location has been queried, we can display it on the map. The map displays the markers using the map component

The function of nearby people in the applet is realized, and the cloud development database realizes the nearby people, sorted according to the distance of the location, and the friends within how many kilometers nearby

The corresponding JS code is as follows

The function of nearby people in the applet is realized, and the cloud development database realizes the nearby people, sorted according to the distance of the location, and the friends within how many kilometers nearby

Now I’ll 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 own location
      type: 'wgs84',
      success: res => {
        const latitude = res.latitude
        const longitude = res.longitude
        console. Log ('current longitude and latitude in Hangzhou ', res.longitude, res.latitude)
        //2. Find 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), // current location
          }).end()
          .then(res => {
            console. Log ('location ', RES)
            res.list.forEach(item => {
              markers.push({
                longitude: item.location.coordinates[0],
                latitude: item.location.coordinates[1]
              })
            })
            //Marked points on the map
            this.setData({
              markers
            })
          })
      }
    })
  }
})

Well, here we take you to complete the function of displaying nearby people on the map. If you think brother stone’s article is good, you are welcome to pay attention to it.

Recommended Today

Proper memory alignment in go language

problem type Part1 struct { a bool b int32 c int8 d int64 e byte } Before we start, I want you to calculatePart1What is the total occupancy size? func main() { fmt.Printf(“bool size: %d\n”, unsafe.Sizeof(bool(true))) fmt.Printf(“int32 size: %d\n”, unsafe.Sizeof(int32(0))) fmt.Printf(“int8 size: %d\n”, unsafe.Sizeof(int8(0))) fmt.Printf(“int64 size: %d\n”, unsafe.Sizeof(int64(0))) fmt.Printf(“byte size: %d\n”, unsafe.Sizeof(byte(0))) fmt.Printf(“string size: %d\n”, […]