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

MySQL 5.7.17 Installations- und Konfigurations-Tutorial unter CentOS6.9

CentOS6.9 installiert Mysql5.7 zu Ihrer Informati...

Detailliertes Beispiel für JavaScript-Array-Methoden

Inhaltsverzeichnis Einführung Erstellen eines Arr...

4 Lösungen für MySQL-Import-CSV-Fehler

Dies soll an die 4 Fallstricke erinnern, in die i...

Vue implementiert eine einfache bidirektionale Datenbindung

In diesem Artikelbeispiel wird der spezifische Co...

Allgemeine Lösungen für das Ablaufen der Lese-/Schreibtrennung in MySQL

Die Fallstricke der Lese- und Schreibtrennung in ...

So benennen Sie in Linux mehrere Dateien gleichzeitig um

Vorwort In unserer täglichen Arbeit müssen wir hä...

Vue3.x verwendet mitt.js für die Komponentenkommunikation

Inhaltsverzeichnis Schnellstart Anwendung Grundpr...

Installationstutorial für Docker unter Linux

Das Docker-Paket ist bereits im Standard-Reposito...