So implementieren Sie die Navigationsfunktion im WeChat Mini-Programm

So implementieren Sie die Navigationsfunktion im WeChat Mini-Programm

1. Rendern

2. Bedienungsschritte

1. Beantragen Sie den Tencent Map-Schlüssel – Adresse

2. Fügen Sie dem Miniprogrammhintergrund das Tencent-Plug-In hinzu - Entwicklungsdokument

3. Mini-Programmcode app.json Einstellungen

let plugin = requirePlugin('routePlan');
let key = ''; //Verwende den im Tencent-Standortdienst beantragten Schlüssel
let referer = ''; //Der Name der App, die das Plugin aufruft let endPoint = JSON.stringify({ //Endpunkt 'name': 'Yoshinoya (Peking Westbahnhof Nordausgang)',
 'Breitengrad': 39.89631551,
 'Längengrad': 116.323459711
});
wx.navigateTo({
 URL: 'plugin://routePlan/index?key=' + Schlüssel + '&referer=' + Referer + '&endPoint=' + Endpunkt
});

Oder Sie nutzen die eingebaute Kartennavigation des Applets

Verwenden Sie die im Applet integrierten Karten wx.getLocation und wx.openLocation

Offizieller Website-Link

//wxml
<button type="default" bindtap="openMap">Karte öffnen</button>
//js
Seite({
 Daten: {

 },
 openMap: Funktion () {
 wx.getLocation({
  Typ: „gcj02“, // Standard ist wgs84, das GPS-Koordinaten zurückgibt, gcj02 gibt Koordinaten zurück, die für wx.openLocation verwendet werden können. Erfolg: Funktion (res) {
  // Erfolg
  Konsole.log(Res.Breitengrad);
  Konsole.log(Auflösung.Längengrad);
  wx.openLocation({
   latitude: res.latitude, // Breitengrad, Bereich ist -90~90, negative Zahl gibt südlichen Breitengrad an longitude: res.longitude, // Längengrad, Bereich ist -180~180, negative Zahl gibt westlichen Längengrad an scale: 28, // Skalierungsverhältnis name:"Name des zu findenden Ortes (dieses und jenes Restaurant)",
   Adresse: „Adresse: Detaillierte Beschreibung des Zielortes“
  })
  }
 })
 }
})

Zusammenfassen

Dies ist das Ende dieses Artikels zur Implementierung der Navigation in WeChat Mini-Programmen. Weitere Informationen zur Navigationsfunktion in WeChat Mini-Programmen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • So implementieren Sie die Kartennavigationsfunktion im WeChat-Applet
  • Detaillierte Erläuterung der Schaltfläche „Zurück“ des WeChat-Applets in der Kapsel | Funktion der benutzerdefinierten Navigationsleiste auf der Startseite
  • Funktion zum Ausblenden und Anzeigen der benutzerdefinierten Navigation des WeChat-Applets
  • Benutzerdefinierte untere Navigation des WeChat-Applets mit Sprungfunktion
  • Beispiel für die dynamische Einstellung der vom WeChat-Applet implementierten Navigationsleistentitelfunktion
  • Beispiel für eine transparente Verlaufsfunktion für die MUI-Navigationsleiste des WeChat-Applets (durch Ändern der Deckkraft)
  • WeChat Mini-Programmserie: Benutzerdefinierte Top-Navigationsfunktion
  • Beispiel für die Gleitpositionierungsfunktion der Navigationsleiste eines WeChat-Applets (Implementierung des CSS3-Positionsticky-Effekts)
  • Kartennavigationsfunktion des WeChat-Applets zum Erreichen eines vollständigen Quellcodes mit Renderings (empfohlen)
  • Die Scroll-Ansicht des WeChat-Applets realisiert die Funktion zum Scrollen zum Ankerpunkt in der linken Navigationsleiste, um Essen zu bestellen (klicken Sie auf den Typ und scrollen Sie zum Ankerpunkt).

<<:  Tutorial zur Master-Slave-Konfiguration der MySQL-Datenbank unter Windows

>>:  Beispiel für die Konfiguration mehrerer SSL-Zertifikate für eine einzelne Nginx-IP-Adresse

Artikel empfehlen

Fallstudie zu JavaScript-Ereignisschleifen

Ereignisschleife in js Da JavaScript ein Single-T...

Eine kurze Diskussion über die Magie von parseInt() in JavaScript

Ursache Der Grund für das Schreiben dieses Blogs ...

Bootstrap realisiert den Karusselleffekt

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

Fallstudie zu JavaScript-Style-Objekten und CurrentStyle-Objekten

1. Stilobjekt Das Stilobjekt stellt eine einzelne...

JavaScript navigator.userAgent erhält Browserinformationen – Fallerklärung

Der Browser ist für uns wahrscheinlich das vertra...

So stellen Sie DoNetCore mit Nginx in der Alibaba Cloud bereit

Grundlegende Umgebungskonfiguration Bitte kaufen ...

MySQL-Daemon konnte nicht gestartet werden – Fehlerlösung

MySQL-Daemon konnte nicht gestartet werden – Fehl...

Detaillierte Erklärung von JavaScript Reduce

Inhaltsverzeichnis Karte Filter manche jeder Inde...

Konvertierung von virtuellem Dom in reales Dom mit Vue

Es gibt eine andere Baumstruktur Javascript-Objek...

Grafisches Tutorial zum Herunterladen und Installieren von MySQL 5.7 und höher

1. Herunterladen 1. Download-Adresse der offiziel...

Lösung für den Fehler beim Kompilieren des LVGL-Emulators unter Linux

Inhaltsverzeichnis 1. Fehlerphänomen 2. Fehlerana...

JavaScript implementiert den Farbänderungseffekt durch Klicken mit neun Rastern

In diesem Artikel wird der spezifische JavaScript...