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

Implementierung und Optimierung von MySql-Unterabfragen IN

Inhaltsverzeichnis Warum ist IN langsam? Was ist ...

Reine CSS-Implementierung eines Radio- und Checkbox-Effektbeispiels

Radio und Kontrollkästchen Reines CSS zum Erziele...

Vier Möglichkeiten, CSS und HTML zu kombinieren

(1) Jedes HTML-Tag hat ein Attribut style, das CS...

Vue+Element - benutzerdefinierte Abfragekomponente

In diesem Artikel wird hauptsächlich das Vue-Proj...

Detaillierte Erklärung zur Verwendung von Teleport in Vue3

Inhaltsverzeichnis Zweck des Teleports So funktio...

Analyse des MySQL-Client-Installationsprozesses auf dem Mac

Versuchen Sie die Installation über Pip in einer ...

Implementierung der mobilen Postcss-pxtorem-Anpassung

Führen Sie den Befehl aus, um das Plugin postcss-...

Analyse des Prinzips der Zentrierung von Elementen mit CSS

Es ist eine sehr häufige Anforderung, die horizon...

Vue Grundlagen Listener Detaillierte Erklärung

Inhaltsverzeichnis Was ist ein Listener in Vue? V...

Mehrere Methoden zum Löschen von Floating (empfohlen)

1. Fügen Sie ein leeres Element desselben Typs hi...

Vue3 erhält die aktuelle Routingadresse

Richtige Antwort Verwenden von useRouter : // Rou...

So verwenden Sie die JSX-Syntax richtig in Vue

Inhaltsverzeichnis Vorwort Virtueller DOM Was ist...