Vue nutzt Baidu Maps zur Realisierung der Stadtpositionierung

In diesem Artikel wird der spezifische Code von Vue mit Baidu Maps zur Realisierung der Stadtpositionierung zu Ihrer Information beschrieben. Der spezifische Inhalt ist wie folgt

Ausführungsumgebung für Vue-Projekte: Vue 2.0, Vue Cli 3.0

Schritt 1: Melden Sie sich bei Baidu Map Open Platform an und erstellen Sie eine Anwendung unter Konsole ----> Anwendungsverwaltung ----> Meine Anwendung.

Der Zweck besteht darin, ak zu erhalten

Schritt 2: In der Datei index.html im öffentlichen Ordner

Importieren Sie Baidu Maps und fügen Sie Ihre ak hinzu

Schritt 3: Erstellen Sie eine vue.config.js-Datei im Stammverzeichnis des Projekts

Wenn eine Datei vue.config.js vorhanden ist, fügen Sie einfach den folgenden Code hinzu.

Die Datei vue.config.js wird nach VueCli 3.0 nicht mehr standardmäßig erstellt. Wenn diese Datei verwendet wird, müssen wir sie manuell erstellen.

modul.exporte = {
  konfigurierenWebpack: {
    Äußerlichkeiten: {
      'BMap': 'BMap' // Baidu-Kartenkonfiguration}
  }
}

Schritt 4: Der nächste Schritt besteht darin, den spezifischen Code zu implementieren.

Als nächstes werden zwei Implementierungslösungen vorgestellt.

Methode 1 (empfohlen): Kapseln Sie die JS-Tooldatei separat ein, um die Adresse zu erhalten.

1. Erstellen Sie einen neuen Util- Ordner unter dem src- Ordner und erstellen Sie dann eine neue getUserLocation.js- Datei im Util-Ordner.

Hinweis: In diesem Util-Ordner können Sie alle Ihre eigenen gekapselten Tool-JS-Dateien speichern, nicht nur die standortbezogene Datei getUserLocation.js .

Der Code und die Screenshots sind wie folgt:

// Aktuelle Stadt abrufen const getCurrentCityName = function() {
  returniere neues Promise((lösen, ablehnen) => {
    lass meineStadt = neue BMap.LocalCity();
    myCity.get((Ergebnis) => {
      let geoc = neues BMap.Geocoder();
      geoc.getLocation(Ergebnis.center, (rs) => {
        // rs enthält alle Standortinformationen, hier erhalten wir nur die Stadt und den Bezirk
        Lassen Sie addComp = rs.addressComponents;
        sei Ergebnis = addComp.Stadt + addComp.Bezirk;
        Lösung (Ergebnis);
      });
    }, {enableHighAccuracy: true});
  });
}
Standardmäßig exportieren: getCurrentCityName;

Führen Sie die in den obigen Dateien gekapselten Methoden in der Komponente ein und rufen Sie sie auf

Methode 1: Tooldateien importieren

Die Seite kann Standortinformationen über das Attribut locationMsg anzeigen, zum Beispiel: Fengtai District, Beijing

Methode 2: Direkt im Bauteil positionieren.

Sie können den folgenden Code direkt in der Komponente verwenden, um sie erfolgreich zu lokalisieren. Diese Methode dauert länger als Methode 1.

Der Code und die Screenshots sind wie folgt:

montiert() {
    // Standortinformationen abrufen this.getCity();
  },
  Methoden: {
    getCity() {
      const getLocation = neue BMap.Geolocation();
      var _this = dies;
      getLocation.getCurrentPosition((position) => {
        // Position speichert alle Positionierungsdaten console.log(position);
        // Hier erhalten wir die Stadt und die Provinz. let city = position.address.city;
        let Provinz = Position.Adresse.Provinz;
        _this.locationMsg = Provinz + Stadt;
      }, () => {
        _this.locationMsg = 'Positionierung fehlgeschlagen!';
      }, {Anbieter: 'baidu'});
    }
  }

Code Diagramm

Hinweis: Das _this hier ist eigentlich unnötig, Sie können dies direkt verwenden. Vor der Verwendung von Pfeilfunktionen wurde _this verwendet. Später, nach der Umstellung auf Pfeilfunktionen, wurde der mit _this verbundene Code nicht geändert. Natürlich ist es kein Problem, gemäß dem obigen Code zu schreiben.

Wenn nichts Unerwartetes passiert, können Sie die Standortinformationen über das Attribut locationMsg in der Komponente abrufen.

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.