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

4 Lösungen für CSS-Browserkompatibilitätsprobleme

Frontend ist ein harter Job, nicht nur weil sich ...

Methoden und Schritte für den Zugriff auf die Baidu Maps API mit JavaScript

Inhaltsverzeichnis 1. Baidu Map API-Zugriff 2. Ve...

Detaillierte Erläuterung des Linux-Indexknoten-Inode

1. Einführung in Inode Um Inode zu verstehen, müs...

Beispielcode für MySQL-Datensicherung und -wiederherstellung

1. Datensicherung 1. Verwenden Sie den Befehl mys...

So installieren Sie Grafana und fügen Influxdb-Überwachung unter Linux hinzu

Installieren Sie Grafana. Die offizielle Website ...

So ändern Sie die Standardübermittlungsmethode des Formulars

Die Standard-Übermittlungsmethode von HTML ist get...

css3-Animation, Ballrollen, js-Steuerung, Animationspause

Mit CSS3 können Animationen erstellt werden, die ...

Docker-Image erstellen Dockerfile und Commit-Operationen

Erstellen des Images Es gibt zwei Hauptmethoden z...

MySQL MSI Installations-Tutorial unter Windows 10 mit Bildern und Text

1. Herunterladen 1. Klicken Sie auf den neuesten ...

So gestalten Sie das Frontend einer Website elegant und attraktiv für Benutzer

Das Temperament einer Web-Frontend-Website ist ein...

Preistabelle mit CSS3 implementiert

Ergebnis: Implementierungscode html <div id=&q...