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

So scrollen Sie manuell durch Protokolle im Linux-System

Die Protokollrotation ist eine sehr gängige Funkt...

Interpretation des CocosCreator-Quellcodes: Engine-Start und Hauptschleife

Inhaltsverzeichnis Vorwort Vorbereitung Gehen! Te...

So deaktivieren Sie die Eslint-Erkennung in Vue (mehrere Methoden)

Inhaltsverzeichnis 1. Problembeschreibung 2. Prob...

JS+CSS zur Realisierung einer dynamischen Uhr

In diesem Artikelbeispiel wird der spezifische Co...

Lösung für das Problem mit verstümmelten chinesischen MySQL-Zeichen

1. Die chinesischen verstümmelten Zeichen erschei...

Vite führt die Implementierung virtueller Dateien ein

Inhaltsverzeichnis Hintergrund Virtuelle Dateien ...

Lösung für die Upload-Einschränkung von Element-ui-Uploaddateien

Frage Die Angabe des Typs der hochgeladenen Datei...

So zentrieren Sie Ihre HTML-Schaltfläche

Wie zentrieren Sie Ihre HTML-Schaltfläche selbst?...

JavaScript BOM erklärt

Inhaltsverzeichnis 1. BOM-Einführung 1. JavaScrip...

So verwenden Sie vw+rem für das mobile Layout

Verwenden Sie immer noch das flexible Rem-Layout?...

So implementieren Sie Reaktionsfähigkeit beim Lernen des Vue-Quellcodes

Inhaltsverzeichnis Vorwort 1. Schlüsselelemente e...

Detailliertes Beispiel der Lesegeschwindigkeit von JS-Objekten

1. Der Zugriff auf Literale und lokale Variablen ...