Das WeChat-Applet zeichnet die Bewegungsbahn des Benutzers auf

Das WeChat-Applet zeichnet die Bewegungsbahn des Benutzers auf

Dieser Artikel ist eine kurze Einführung zum Abrufen von Standortinformationen, auch wenn das WeChat Mini-Programm geschlossen ist.

Hauptschritte

1. Konfiguration hinzufügen

2. Standortverfolgung aktivieren

3. Aufnahme starten

Konfiguration hinzufügen

JSON-Konfiguration

Hinweis: Diese Konfiguration wird ab der Basisbibliothek 2.8 unterstützt.

Miniprogramm Grundbibliothek Zuordnungsverhältnis

"erforderlicheHintergrundmodi": ["Standort"],
"Erlaubnis": {
	"scope.Benutzerstandort": {
		"desc": "Ihre Standortinformationen werden für den Standortanzeigeeffekt des Miniprogramms verwendet"
	}
}

Die Konfiguration von app.json ist der Schlüssel zur Realisierung der Positionierung der Hintergrundaktualisierung des Miniprogramms

Nach der Konfiguration sehen die Einstellungen wie in der Abbildung aus: Es gibt neue Optionen. Nach der Auswahl können Sie die Änderungen des Positionierungspunkts auch bei ausgeschaltetem Bildschirm überwachen.

Ebenenkonfiguration anzeigen

Dokumentation der offiziellen Website der Kartenkomponente: Link

<Kartenmarkierungen="{{Markierungen}}" Polylinie="{{Polylinie}}" Längengrad="{{Längengrad}}" Breitengrad="{{Breitengrad}}"></Karte>

Konfiguration der logischen Schicht

Daten: {
	longitude: '', // Längengrad des Kartenstandortpunkts latitude: '', // Breitengrad des Kartenstandortpunkts markers: [], // Koordinaten der Start- und Endpunkte der Track-Polylinie aufzeichnen: [], // Track-Route;
	positionArr: []
}

Konfigurieren Sie die erforderlichen Informationen für die Trackaufzeichnung auf der Ansichtsebene und der Logikebene:

1. Längengrad, Breitengrad Die Karte zeigt die Koordinaten des aktuellen Standortpunkts

2. Markierungen, notieren Sie die Koordinaten der Start- und Endpunkte der Strecke

3. Polylinie, Routenaufzeichnung verfolgen;

Aktivieren Sie die Standortverfolgung

Hintergrundpositionierungsmodus aktivieren und Autorisierungsanfrage initiieren

Autorisierungsantrag:

Sie können gemäß wx.getSetting (Object-Objekt) eine Autorisierungsanforderung an den Benutzer stellen. Wenn der Benutzer die Autorisierung jedoch versehentlich ablehnt, wird das Feld für die Autorisierungsanforderung nicht angezeigt.

wx.startLocationUpdateBackground({
	Erfolg: res => {
            //Markieren, der Hintergrundpositionierungsmodus ist aktiviert;
        },
	fehlgeschlagen: err => {
            wx.showModal({content: "Gehe zu den Einstellungen"})
        }
})

Daher wird empfohlen, die Schnittstelle direkt aufzurufen, um die Hintergrundaktualisierungspositionierung des Applets in Kombination mit getsetting zu starten.

Wenn der Aufruf fehlschlägt und der von der Einstellungs-API zurückgegebene Speicherort der Autorisierungsliste nicht autorisiert ist, bedeutet dies, dass der Benutzer nicht autorisiert ist. Weisen Sie Benutzer an, die Autorisierung in den Einstellungen selbst zu aktivieren.

Aufnahme starten

Bestimmen Sie die Startkoordinaten

Nach Erhalt der Standortinformationsautorisierung erhalten Sie die aktuellen Standortinformationen

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

Nachdem Sie die Standortinformationen erhalten haben, aktualisieren Sie 1. Längengrad und Breitengrad in der logischen Ebene entsprechend den zurückgegebenen Längen- und Breitengraden. 2. Markierungen

Der Effekt ist wie unten dargestellt:

Auf Informationen zu Standortänderungen warten

wx.offLocationChange()
wx.onLocationChange(res => {
	const { Breitengrad, Längengrad } = res;
})

Hinweis: Es wird empfohlen, vor dem Einschalten der Überwachung zuerst die Überwachung auszuschalten. Vermeiden Sie das gleichzeitige Öffnen mehrerer Monitore, um Datenverwirrungen zu vermeiden.

Sammeln Sie Positionierungspunktinformationen gemäß den Regeln

Die Informationen zur Positionsänderung werden ungefähr jede Sekunde abgerufen. Sie können einen Zeit- oder Zählmechanismus hinzufügen, um die Häufigkeit des Datenabrufs zu verringern.

Selbst das Hinzufügen eines Zeitmechanismus kann die Häufigkeit von Schnittstellenrückgaben nicht verringern, aber die Wahrscheinlichkeit abnormaler Positionierungspunkte wirksam reduzieren.

Extrahieren Sie alle 10 Mal Standortinformationen, zum Beispiel:

lass count = 0;
beiStandortänderung(res => {
	Anzahl > 10 && (Anzahl = 0)
	Anzahl == 0 && positionArr.push([Längengrad,Breitengrad])
	zählen++;
})

Gültige Datenerkennung

Vergleichen Sie jede extrahierte Information mit den letzten Koordinatendaten in PositionArr

// Kapseln Sie die Methode zum Ermitteln der Entfernung zwischen zwei Koordinatenpunkten ein.
getDistance(lat1, lng1, lat2, lng2) {
	Rückweg
},

Wenn die Daten die Anforderungen erfüllen, verschieben Sie sie an die Position Arr

Darstellung der Aktivitätsspur

getPolyline() {
	Konstante Polylinie = [];
	positionArr.fürJeden(item => {
		..........
	})
	Rückführungspolylinie
}

Die Aktivitätsspur muss jedes Mal neu gerendert werden, wenn der neueste Koordinatenpunkt hinzugefügt wird

Trackverfolgung beenden

Wenn die Verfolgung abgeschlossen ist:

1. Aktualisieren Sie den Endkoordinatenpunkt auf Markierungen als Endpunktmarkierung.

2. Aktivitätstracker aktualisieren

Dies endet

wx.offLocationChange()
positionArr.push([Längengrad,Breitengrad])
getPolyline()

Hinweis: offLocationChange hat keine Rückrufmethode und wird synchron ausgeführt. (Vertrauen Sie der Dokumentation nicht)

Denken Sie daran, einen Mechanismus zum Deaktivieren der Überwachungspositionierung hinzuzufügen, um eine Überwachung und Aufzeichnung zu vermeiden, wenn die Positionierung nicht mehr erforderlich ist, da dies die Leistung beeinträchtigen würde.

Einführung der Amap API

Wenn Sie die Standortinformationen jedes Positionierungspunkts aufzeichnen müssen, unterstützt das Miniprogramm die Einführung der API von Amap. Wenn Sie Zeit haben, können Sie einen Blick darauf werfen.

Erste Schritte

Zusammenfassen

Dies ist das Ende dieses Artikels über WeChat-Miniprogramme, die Benutzerbewegungsbahnen aufzeichnen. Weitere relevante Inhalte zu Benutzerbewegungsbahnen in Miniprogrammen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<:  So installieren Sie Composer unter Linux

>>:  Detaillierte Erläuterung der Linux-Textverarbeitungstools

Artikel empfehlen

jQuery implementiert einen einfachen Popup-Fenstereffekt

In diesem Artikel wird der spezifische Code von j...

Einführung in Kubernetes (k8s)

Ich wollte schon immer Kubernetes lernen, weil es...

100 Möglichkeiten, die Farbe eines Bildes mit CSS zu ändern (sammelnswert)

Vorwort „Wenn es um Bildbearbeitung geht, denken ...

Eine Zeile CSS-Code, die Chrome zum Absturz bringt

Allgemeiner CSS-Code verursacht nur geringfügige ...