This is the fourth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

This article is a brief introduction to the micro channel mini program can still obtain location information in the case of closing

The main steps

1. Add configurations

2. Enable location tracking

3. Start recording

Add the configuration

Json configuration

Note: This configuration is supported after base library 2.8

Small program base library allocation proportion

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

The configuration of app.json is the key to realize the background update positioning of small programs

In the Settings after configuration, as shown in the figure: there will be new options, and the change of registration point can also be monitored when the screen is off

View Layer Configuration

Map official website document:link

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

Logical layer configuration

data: {
	longitude: ' '.// Map positioning point longitude
	latitude: ' '.// Map location latitude
	markers: [].// Record the start and end coordinates of the track
	polyline: [].// The path;
	positionArr: []}Copy the code

The view layer and logic layer are configured to record the necessary information: longitude, latitude map displays the current location point coordinates; 2. Markers record the start and end coordinates of the track; 3. Polyline, track route record; 4.

Turn on location tracking

Enable the background location mode and initiate an authorization application

Authorization application:

You can initiate an authorization request to the user according to the wX.getSetting (Object Object). However, if the user denies the authorization accidentally, the authorization request cannot be displayed.

wx.startLocationUpdateBackground({
	success: res= > {
            // The background positioning mode has been enabled;
        },
	fail: err= > {
            wx.showModal({content: "Go set it up."})}})Copy the code

Therefore, it is recommended to choose to directly call the interface to open the small program background update positioning combined with getSetting;

If the call fails and the authorization list returned by the Setting API for Location is not authorized, the user is not authorized. Guide users to turn on authorization in Settings themselves;

Start recording

Determine initial coordinates

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

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

After obtaining the location information, update 1. Longitude, latitude in the logical layer based on the returned longitude and latitude. 2.markers

The effect is as follows:

Listen for position change information

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

Note: You are advised to disable listening before enabling it. Do not enable multiple listeners at the same time, which may cause data confusion.

Collect registration point information according to rules

Location change information is obtained once every 1s. You can add your own timing or counting mechanisms to reduce the frequency of fetching data;

Even if the timing mechanism is added, the return frequency of the interface cannot be reduced, but the probability of abnormal registration points can be effectively reduced.

Extracting location information every 10 times, for example:

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

Valid data detection

The information extracted each time is compared with the last coordinate data in the positionArr

// Encapsulate the method to obtain the distance between two coordinate points;
getDistance(lat1, lng1, lat2, lng2) {
	return distance
},
Copy the code

If the data meets the standard, it is pushed to positionArr

Activity track rendering

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

The activity trail is rerendered each time the latest coordinate point is added

End track tracking

When ending trajectory tracking:

1. Update the end point to markers as the end point;

2. Update the activity track

At this point the end

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

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

Be sure to add a mechanism to turn off the monitoring for location. This will prevent performance from being affected if the location is no longer needed.

Introduce amap API

If you need to record the location information of each registration point, applet supports the introduction of Autonavi API. If you have time, check out the getting Started guide