Detaillierte Erläuterung zur Verwendung der WeChat-Miniprogrammkarte

Detaillierte Erläuterung zur Verwendung der WeChat-Miniprogrammkarte

In diesem Artikelbeispiel wird der spezifische Implementierungscode, der von der WeChat-Applet-Karte verwendet wird, zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Der folgende Code ist der Hauptcodeausschnitt

<!-- Kartenausschnitt -->
  <!-- enable-traffic Verkehrsbedingungen anzeigen -->
  <Klasse anzeigen="Kartencontainer">
   <map id='customerMap' class="map" :longitude='Längengrad' :latitude='Breitengrad' :scale='Maßstab'
    :Marker='Marker' :Controls='Controls' Anzeigeort
    @markertap="markertap" @updated="aktualisierteKarte" @controltap='bindcontroltap'></karte>
</Ansicht>
Daten(){
  zurückkehren {
      Breitengrad:23.140962248,
      Längengrad: 113.305301124,
      Maßstab: 12,
      Markierungen:[ {id: '',
     Breitengrad: 23.140962248,
     Längengrad: 113.305301124,
     iconPath: '../static/select-dw.png', //Breite des Symbolpfads am aktuellen Standort: 25,
     Höhe: 39,
     },
                    {
                    Breitengrad: 23.129742,
     Längengrad: 113.26754,
     iconPath: '../static/mark.png', //Breite des Kundensymbolpfads: 28,
     Höhe: 28,
     Etikett: {
      Inhalt: 'Zhan Junjun',
      Textausrichtung: "zentriert",
      Schriftgröße: 12
        }
                    }]  
 
  }
 
},
onReady() {
 this.mapCtx = wx.createMapContext('Kundenkarte')
},
Methoden:{
 
    // Klicke auf den Markierungspunkt markertap(e) {
    let { markerId } = e.detail;
    let item = this.markers.find(v => v.id === markerId);
    Konsole.log('Element', Element)
    uni.openLocation({
     Breitengrad: Zahl(item.latitude),
     Längengrad: Zahl(item.longitude),
     Name: Artikel.Etikett.Inhalt,
     Adresse: Artikel.Adresse,
     Erfolg: Funktion() {
      console.log('Erfolg');
     }
    });
   },
    // Wenn die Karte geladen ist, löse updatedmap() aus {
    dies.mapUpdated = wahr;
    console.log('Ausführung')
    this.includePoints(); //Alle Kunden werden in der Ansicht angezeigt},
    // Markierungspunkt in der Karte sichtbar machen includePoints() {
    const das = dies
    const Punkte = [{
     Breitengrad: dieser.Breitengrad,
     Längengrad: dieser.Längengrad
    }];
    dies.markers.forEach(item => {
     const obi = {
      Breitengrad: item.latitude,
      Längengrad: item.longitude
     }
     Punkte.push(obi)
    })
    diese.mapCtx.includePoints({
     Polsterung: [80, 50, 80, 50],
     Punkte
    })
   },
}

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Einfaches Beispiel für die Kartenpositionierung des WeChat-Applets
  • Beispiel für eine WeChat-Applet-Karte (Karte) mit ausführlicher Erläuterung
  • So implementieren Sie die Kartennavigationsfunktion im WeChat-Applet
  • Detaillierte Erklärung und Implementierungsschritte zur Verwendung des Tencent Map SDK im WeChat Mini-Programm
  • WeChat Mini-Programm Amap SDK – ausführliche Erklärung und einfache Beispiele (Quellcode-Download)
  • Detaillierte Erklärung und einfaches Beispiel der WeChat-Applet-Karte
  • Tutorial zur Implementierung einer WeChat-Applet-Entwicklungskarte
  • WeChat-Applet: Aktuellen Längen- und Breitengrad des Standorts sowie Kartenanzeigedetails abrufen
  • WeChat Mini-Programm-Tutorial: Detailliertes Beispiel für den lokalen Bild-Upload (leancloud)
  • So erhalten Sie Längen- und Breitengrade durch Klicken auf die Kartenkomponente des WeChat-Applets

<<:  Beispiel für die Verwendung von MRG_MyISAM (MERGE) zur Implementierung einer Abfrage nach der Partitionierung in MySQL

>>:  8 leistungsstarke Techniken zum Erstellen von HTML-Webseiten

Artikel empfehlen

Wie viele Daten können in einer MySQL-Tabelle gespeichert werden?

Programmierer müssen sich viel mit MySQL befassen...

Wie überwacht und erhält Zabbix Netzwerkgerätedaten über SSH?

Szenariosimulation: Das Betriebs- und Wartungsper...

So konfigurieren Sie mehrere Projekte mit demselben Domänennamen in Nginx

Es gibt zwei Möglichkeiten, mit Nginx mehrere Pro...

Docker+Gitlab+Jenkins erstellt automatisierte Bereitstellung von Grund auf

Inhaltsverzeichnis Vorwort: 1. Docker installiere...

Detaillierte Erläuterung der Verwendung des MySQL-Auswahl-Cache-Mechanismus

Der MySQL-Abfragecache ist standardmäßig aktivier...

Design-Story: Der Wachmann, der sich Nummernschilder nicht merken kann

<br />Um die Fahrzeuge zu regeln, die in die...

Zugriffsvorgang im MySQL-Befehlszeilenmodus MySQL-Datenbankvorgang

Nutzungsumgebung Geben Sie im cmd-Modus mysql --v...

Einführung in die Verwendung gängiger XHTML-Tags

Es gibt viele Tags in XHTML, aber nur wenige werd...

Konvertierung von virtuellem Dom in reales Dom mit Vue

Es gibt eine andere Baumstruktur Javascript-Objek...

Welchen MySQL-Eindeutigen Index oder Normalen Index soll ich wählen?

Stellen Sie sich ein Szenario vor, in dem beim En...

So stellen Sie FastDFS in Docker bereit

Installieren Sie Fastdfs auf Docker Mount-Verzeic...

SQL zur Implementierung der Wiederherstellung einer Zeitreihenversetzung

Inhaltsverzeichnis 1. Anforderungsbeschreibung 2....

Details zu den Überwachungseigenschaften der Uhr in Vue

Inhaltsverzeichnis 1.watch überwacht Änderungen i...