WeChat applet records user movement trajectory

This article is a brief introduction to how to obtain location information even when WeChat Mini Program is closed.

Main steps

1. Add configuration

2. Enable location tracking

3. Start recording

Add Configuration

json configuration

Note: This configuration is supported after the basic library 2.8

Mini Program Basic Library Allocation Ratio

"requiredBackgroundModes": ["location"],
"permission": {
	"scope.userLocation": {
		"desc": "Your location information will be used for the mini program location display effect"
	}
}

The configuration of app.json is the key to realize the background update positioning of the mini program

After configuration, the settings will be as shown in the figure: there will be new options. After selecting them, you can also monitor the changes of the positioning point even when the screen is off.

View layer configuration

Map component official website documentation: Link

<map markers="{{markers}}" polyline="{{polyline}}" longitude="{{longitude}}" latitude="{{latitude}}"></map>

Logical layer configuration

data: {
	longitude: '', // longitude of the map location point latitude: '', // latitude of the map location point markers: [], // record the coordinates of the start and end points of the track polyline: [], // track route;
	positionArr: []
}

Configure the necessary information for track recording at the view layer and logic layer:

1. Longitude, latitude The map shows the coordinates of the current location point

2. markers, record the coordinates of the start and end points of the track

3.polyline, track route record;

Turn on location tracking

Enable background positioning mode and initiate authorization request

Authorization Application:

You can initiate an authorization request to the user according to wx.getSetting(Object object), but if the user accidentally refuses authorization, the authorization request box will not pop up.

wx.startLocationUpdateBackground({
	success: res => {
            //Mark, background positioning mode is turned on;
        },
	fail: err => {
            wx.showModal({content: "Go to settings"})
        }
})

Therefore, it is recommended to directly call the interface to start the background update positioning of the applet combined with getsetting;

If the call fails and the authorization list location returned by the setting API is not authorized, it means that the user is not authorized. Guide users to turn on authorization in settings themselves;

Start recording

Determine the starting coordinates

After obtaining the location information authorization, obtain the current location information

wx.getLocation({
	success: res => { }
});

After obtaining the location information, update 1.longitude, latitude in the logical layer according to the returned longitude and latitude. 2. markers

The effect is as shown below:

Listening for location change information

wx.offLocationChange()
wx.onLocationChange(res => {
	const { latitude, longitude } = res;
})

Note: Before turning on monitoring, it is recommended to turn off monitoring first. Avoid opening multiple monitors at the same time to avoid data confusion.

Collect positioning point information according to rules

The position change information is obtained approximately once every 1 second. You can add a timing or counting mechanism to reduce the frequency of obtaining data;

Even adding a timing mechanism cannot reduce the frequency of interface returns, but it can effectively reduce the probability of abnormal positioning points;

Extract location information every 10 times, for example:

let count = 0;
onLocationChange(res => {
	count > 10 && (count = 0)
	count == 0 && positionArr.push([longitude,latitude])
	count++;
})

Valid data detection

Compare each extracted information with the last coordinate data in positionArr

// Encapsulate the method of obtaining the distance between two coordinate points;
getDistance(lat1, lng1, lat2, lng2) {
	return distance
},

If the data meets the requirements, push it to positionArr

Activity track rendering

getPolyline() {
	const polyline = [];
	positionArr.forEach(item => {
		..........
	})
	return polyline
}

The activity track must be re-rendered every time the latest coordinate point is added

End track tracking

When the tracking is finished:

1. Update the ending coordinate point to markers as the end point mark;

2. Update activity track

This ends

wx.offLocationChange()
positionArr.push([longitude,latitude])
getPolyline()

Note: offLocationChange has no callback method and is executed synchronously. (Don’t trust the documentation)

Remember to add a mechanism to turn off monitoring positioning to avoid monitoring and recording when positioning is no longer needed, which will affect performance.

Introducing Amap API

If you need to record the location information of each positioning point, the mini program supports the introduction of Amap's API. If you have free time, you can take a look.

Getting Started

Summarize

This is the end of this article about WeChat mini-programs that record user movement trajectories. For more relevant mini-program user movement trajectories content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!