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

Drei Möglichkeiten, das horizontale Div-Layout auf beiden Seiten auszurichten

In diesem Artikel werden hauptsächlich drei Metho...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.17

In diesem Artikel wird die Installations- und Kon...

Ausführliche Erklärung der Modi und Umgebungsvariablen in Vue CLI

Vorwort Bei der Entwicklung tatsächlicher Projekt...

So vermeiden Sie die Duplizierung von Daten beim Einfügen in einen MySql-Batch

Inhaltsverzeichnis Vorwort 1. Einfügen von ignore...

Details zum JavaScript-Abschluss

Inhaltsverzeichnis 1. Was ist ein Abschluss? 2. D...

Verständnis und Lösungen für 1px-Linien in der mobilen Entwicklung

Gründe, warum die 1px-Linie dicker wird Wenn wir ...

JS realisiert den Front-End-Paging-Effekt

In diesem Artikelbeispiel wird der spezifische JS...

Grafisches Installationstutorial für MySQL 8.0.17

In diesem Artikel finden Sie das grafische Tutori...

Die umfassendste Sammlung von Front-End-Interviewfragen

HTML und CSS 1. Verständnis und Kenntnisse von WE...

MySql Installer 8.0.18 Visuelles Installationstutorial mit Bildern und Text

Inhaltsverzeichnis 1. MySQL 8.0.18 installieren 2...

Mehrere gängige Methoden zum Senden von Anfragen mit Axios in React

Inhaltsverzeichnis Installieren und Einführen von...

Implementierung von FIFO in der Linux-Prozesskommunikation

FIFO-Kommunikation (First In First Out) FIFO-Name...

Tutorial zu HTML-Tabellen-Tags (11): Horizontales Ausrichtungsattribut ALIGN

In horizontaler Richtung können Sie die Ausrichtu...

Css3 realisiert nahtloses Scrollen und Anti-Shake

Frage Das nahtlose Scrollen von Bildern und Texte...