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

2 Methoden und Vorsichtsmaßnahmen zum Hinzufügen von Skripten in HTML

So fügen Sie ein <script>-Skript in HTML ein...

JS Canvas realisiert die Funktionen von Zeichenbrett und Signaturtafel

In diesem Artikel wird der spezifische Code von J...

So zeigen Sie den Kennwortablauf unter Linux an und konfigurieren ihn

Mit den richtigen Einstellungen können Sie Linux-...

So erstellen, starten und stoppen Sie einen Docker-Container

1. Ein Container ist eine unabhängig laufende Anw...

JavaScript zum Erzielen eines einfachen Karusselleffekts

Was ist ein Karussell? Karussell: In einem Modul ...

So lösen Sie das Zeichensatzproblem bei der Anmeldung bei Linux

Zeichensatzfehler treten immer auf Gebietsschema:...

Analyse und Beschreibung von Netzwerkkonfigurationsdateien unter Ubuntu-System

Ich bin heute auf ein seltsames Netzwerkproblem g...

Einführung in Who-Befehlsbeispiele in Linux

Über wen Zeigt die am System angemeldeten Benutze...

Gängige Reparaturmethoden für die Trennung der MySQL Master-Slave-Replikation

Inhaltsverzeichnis 01 Problembeschreibung 02 Lösu...

Ein Designer beschwert sich erneut über die offizielle Website von Hammer

Letztes Jahr war der offene Brief ein großer Erfo...

Detaillierte Erläuterung der MySQL sql_mode-Abfrage und -Einstellung

1. Führen Sie SQL aus, um anzuzeigen wählen Sie @...