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

calc(), um einen Vollbild-Hintergrundinhalt mit fester Breite zu erreichen

In den letzten Jahren gab es im Webdesign einen T...

So ändern Sie den Punkt im WeChat-Applet Swiper-Dot in einen Slider

Inhaltsverzeichnis Hintergrund Zieleffekt Ideen e...

So verwenden Sie das Videowiedergabe-Plugin DPlayer.js

Das Videoplayer-Plugin DPlayer.js ist einfach zu ...

JavaScript generiert dynamisch eine Tabelle mit Zeilenlöschfunktion

In diesem Artikelbeispiel wird der spezifische Co...

Ein kurzer Vortrag über den Diff-Algorithmus in Vue

Inhaltsverzeichnis Überblick Virtueller Dom Prinz...

Detaillierte Erläuterung der bidirektionalen Bindung von Vue

Inhaltsverzeichnis 1. Zwei-Wege-Bindung 2. Wird d...

Ein Artikel zum Verständnis von Linux-Festplatten und Festplattenpartitionen

Vorwort Alle Hardwaregeräte im Linux-System werde...

Vue2.x - Beispiel für die Verwendung von Anti-Shake und Throttling

Inhaltsverzeichnis Dienstprogramme: Verwendung in...

Der Unterschied zwischen Name und Wert im Eingabe-Tag

Typ ist das Steuerelement, das für die Eingabe und...

Einführung in Javascript DOM, Knoten und Elementerfassung

Inhaltsverzeichnis DOM Knoten Elementknoten: Text...

Vorschläge zur Optimierung der Webseiten-Kopfzeile

Logo-Optimierung: 1. Das Logobild sollte so klein...