Aufrufen von Baidu Map zum Abrufen von Längen- und Breitengrad in Vue

Im Projekt ist es erforderlich, den Breiten- und Längengrad des aktuellen Standorts zu ermitteln oder nach einem Standort zu suchen und die Breiten- und Längengradinformationen abzurufen. Ich verwende Vue und die Karte verwendet Baidu Maps.

Vue ruft Baidu Map auf, um den aktuellen Längen- und Breitengrad abzurufen, und js ruft den aktuellen Längen- und Breitengrad ab

Standardmäßig werden der Breiten- und Längengrad des aktuellen Standorts automatisch ermittelt.

Ziehen Sie die kleine rote Markierung, um den Längen- und Breitengrad zu erhalten

Stichwortabfrage zum Abrufen von Längen- und Breitengrad

Vorbereitende Vorbereitung

Zuerst müssen wir auf der offiziellen Baidu-Website einen Map-API-Schlüssel beantragen. Gehen Sie zu https://lbsyun.baidu.com/apiconsole/key und beantragen Sie ihn unter „Anwendungsverwaltung“, „Meine Anwendung“.

Nach der Anwendung öffnen wir die Datei index.html unter der öffentlichen Datei im Vue-Projekt, fügen den Baidu AK-Wert ein und führen ihn ein

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=WFKACU6v7aiUdnkgtMCqdWBZC68KpUXv"></script>

Wie oben gezeigt, ist der rote Bereich der AK-Wert. Sie können Ihren eigenen zusammenstellen und die Berechtigungen auf öffentlich oder für die URL-Whitelist festlegen.

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=WFKACU6v7aiUdnkgtMCqdWBZC68KpUXv"></script>

Ich habe die Popup-Fenster, Eingabefelder und Eingabeaufforderungen von Elementui verwendet. Wenn Sie Elementui nicht verwenden, denken Sie daran, es zu ändern!

HTML Code

<Vorlage>
  <div>
    <el-dialog
      @close="Dialog löschen"
      :Schließen bei Klick-Modal="false"
      :title="Text"
      Stil="Textausrichtung: links"
      :sichtbar.sync="Popup"
      Breite="30%"
    >
      <div Klasse="Formularebene">
        <el-form label-width="100px" size="mini">
          <el-form-item label="Standort abrufen">
            <el-button type="primary" @click="fixedPos">Neu positionieren</el-button>
          </el-form-item>
          <el-form-item label="Aktueller Breitengrad">
            <p>{{Breitengrad}}</p>
          </el-form-item>
          <el-form-item label="Aktueller Längengrad">
            <p>{{Längengrad}}</p>
          </el-form-item>
          <el-form-item>
            <div Klasse="fac">
              <el-input v-model="keyWords" placeholder="Bitte geben Sie die Region ein" style="width: 230px;margin-right: 6px;"></el-input>
              <el-button type="primary" @click="setPlace" :disabled="!keyWords">Abfrage</el-button>
            </div>
          </el-form-item>
        </el-form>
        <div id="Karte"></div>
      </div>
      <div slot="Fußzeile" class="dialog-footer">
        <el-Schaltfläche
          Größe="klein"
          Typ="primär"
          v-if="Typ != '2'"
          @click="btnSenden()"
          >Bestätigen</el-Button
        >
        <el-button size="small" @click="popup = false">Abbrechen</el-button>
      </div>
    </el-dialog>
  </div>
</Vorlage>

JS-Code

<Skript>
  Standard exportieren {
    Name: "mapView",
    Daten() {
      zurückkehren {
        Karte: null,
        lokal: null,
        mk: null,
        Breitengrad: '',
        Längengrad: '',
        Schlüsselwörter: ''
      };
    },
    Methoden: {
      //Öffne das Popup-Fenster, Name ist der Name des Popup-Fensters async openDialog(name) {
        dieser.text = Name;
        dies.popup = wahr;
        dies.initMap();
      },
      // Bestätige btnSubmit() {
        let Schlüssel = {
          Breitengrad: dieser.Breitengrad,
          Längengrad: dieser.Längengrad
        }
        // Längen- und Breitengrad drucken console.log(key);
        dieses.popup = falsch;
      },
      initMap() {
        dies.$nextTick(() => {
          diese.map = neue BMap.Map("map");
          let Punkt = neuer BMap.Punkt(116.404, 39.915);
          this.map.centerAndZoom(Punkt, 12);
          this.map.enableScrollWheelZoom(true); // Mausrad-Zoom aktivieren this.map.addControl(new BMap.NavigationControl());
          dies.fixedPos();
        });
      },
      // Klicken zum Lokalisieren - Lokalisieren zur aktuellen Position fixedPos() {
        const _this = dies;
        const geolocation = neue BMap.Geolocation();
        Dies.confirmLoading = wahr;
        geolocation.getCurrentPosition(Funktion (r) {
          wenn (this.getStatus() == BMAP_STATUS_SUCCESS) {
            _this.handleMarker(_this, r.punkt);
            let myGeo = neues BMap.Geocoder();
            myGeo.getLocation(
              neuer BMap.Point(r.point.lng, r.point.lat),
              Funktion (Ergebnis) {
                _this.confirmLoading = falsch;
                wenn (Ergebnis) {
                  _this.latitude = Ergebnis.Punkt.Breitengrad;
                  _this.longitude = Ergebnis.Punkt.lng;
                }
              }
            );
          } anders {
            _this.$message.error("fehlgeschlagen" + this.getStatus());
          }
        });
      },
      // Suchadresse setPlace() {
        this.local = neue BMap.LocalSearch(this.map, {
          bei abgeschlossener Suche: dieser.Suchort,
        });
        diese.lokale.Suche(diese.Schlüsselwörter);
      },
      suchOrt() {
        wenn (this.local.getResults() != undefiniert) {
          this.map.clearOverlays(); //Alle Overlays auf der Karte löschenif (this.local.getResults().getPoi(0)) {
            let point = this.local.getResults().getPoi(0).point; //Erstes intelligentes Suchergebnis abrufen this.map.centerAndZoom(point, 18);
            this.handleMarker(dieser, Punkt);
            console.log("Längengrad: " + point.lng + "--" + "Breitengrad" + point.lat);
            dieser.Breitengrad = Punkt.Breitengrad;
            diese.Länge = Punkt.lng;
          } anders {
            this.$message.error("Kein Standort gefunden!");
          }
        } anders {
          this.$message.error("Keine Suchergebnisse gefunden!");
        }
      },
      // Setze die Markierung handleMarker(obj, point) {
        lass das = dies;
        obj.mk = neuer BMap.Marker(Punkt);
        obj.map.addOverlay(obj.mk);
        obj.mk.enableDragging(); // ziehbar obj.mk.addEventListener("dragend", function (e) {
          // Auf das Ziehen der Annotation achten und nach dem Ziehen Längen- und Breitengrad abrufen that.latitude = e.point.lat;
          dieser.Längengrad = e.Punkt.lng;
        });
        obj.map.panTo(Punkt);
      },
    }
  };
</Skript>

CSS Code

<Stilbereich>
  .form-layer {
    Breite: 100 %;
  }
  #Karte {
    Rand oben: 30px;
    Breite: 100 %;
    Höhe: 300px;
    Rand: 1px durchgehend grau;
    Box-Größe: Rahmenbox;
    Überlauf: versteckt;
  }
  /deep/ .el-dialog {
    Mindestbreite: 550px;
  }
  /deep/ .el-dialog__body {
    Polsterung: 10px;
  }
</Stil>

Vollständiger Code

<Vorlage>
  <div>
    <el-dialog
      @close="Dialog löschen"
      :Schließen bei Klick-Modal="false"
      :title="Text"
      Stil="Textausrichtung: links"
      :sichtbar.sync="Popup"
      Breite="30%"
    >
      <div Klasse="Formularebene">
        <el-form label-width="100px" size="mini">
          <el-form-item label="Standort abrufen">
            <el-button type="primary" @click="fixedPos">Neu positionieren</el-button>
          </el-form-item>
          <el-form-item label="Aktueller Breitengrad">
            <p>{{Breitengrad}}</p>
          </el-form-item>
          <el-form-item label="Aktueller Längengrad">
            <p>{{Längengrad}}</p>
          </el-form-item>
          <el-form-item>
            <div Klasse="fac">
              <el-input v-model="keyWords" placeholder="Bitte geben Sie die Region ein" style="width: 230px;margin-right: 6px;"></el-input>
              <el-button type="primary" @click="setPlace" :disabled="!keyWords">Abfrage</el-button>
            </div>
          </el-form-item>
        </el-form>
        <div id="Karte"></div>
      </div>
      <div slot="Fußzeile" class="dialog-footer">
        <el-Schaltfläche
          Größe="klein"
          Typ="primär"
          v-if="Typ != '2'"
          @click="btnSenden()"
          >Bestätigen</el-Button
        >
        <el-button size="small" @click="popup = false">Abbrechen</el-button>
      </div>
    </el-dialog>
  </div>
</Vorlage>
<Skript>
  Standard exportieren {
    Name: "mapView",
    Daten() {
      zurückkehren {
        Karte: null,
        lokal: null,
        mk: null,
        Breitengrad: '',
        Längengrad: '',
        Schlüsselwörter: ''
      };
    },
    Methoden: {
      //Öffne das Popup-Fenster, Name ist der Name des Popup-Fensters async openDialog(name) {
        dieser.text = Name;
        dies.popup = wahr;
        dies.initMap();
      },
      // Bestätige btnSubmit() {
        let Schlüssel = {
          Breitengrad: dieser.Breitengrad,
          Längengrad: dieser.Längengrad
        }
        // Längen- und Breitengrad drucken console.log(key);
        dieses.popup = falsch;
      },
      initMap() {
        dies.$nextTick(() => {
          diese.map = neue BMap.Map("map");
          let Punkt = neuer BMap.Punkt(116.404, 39.915);
          this.map.centerAndZoom(Punkt, 12);
          this.map.enableScrollWheelZoom(true); // Mausrad-Zoom aktivieren this.map.addControl(new BMap.NavigationControl());
          dies.fixedPos();
        });
      },
      // Klicken zum Lokalisieren - Lokalisieren zur aktuellen Position fixedPos() {
        const _this = dies;
        const geolocation = neue BMap.Geolocation();
        Dies.confirmLoading = wahr;
        geolocation.getCurrentPosition(Funktion (r) {
          wenn (this.getStatus() == BMAP_STATUS_SUCCESS) {
            _this.handleMarker(_this, r.punkt);
            let myGeo = neues BMap.Geocoder();
            myGeo.getLocation(
              neuer BMap.Point(r.point.lng, r.point.lat),
              Funktion (Ergebnis) {
                _this.confirmLoading = falsch;
                wenn (Ergebnis) {
                  _this.latitude = Ergebnis.Punkt.Breitengrad;
                  _this.longitude = Ergebnis.Punkt.lng;
                }
              }
            );
          } anders {
            _this.$message.error("fehlgeschlagen" + this.getStatus());
          }
        });
      },
      // Suchadresse setPlace() {
        this.local = neue BMap.LocalSearch(this.map, {
          bei abgeschlossener Suche: dieser.Suchort,
        });
        diese.lokale.Suche(diese.Schlüsselwörter);
      },
      suchOrt() {
        wenn (this.local.getResults() != undefiniert) {
          this.map.clearOverlays(); //Alle Overlays auf der Karte löschenif (this.local.getResults().getPoi(0)) {
            let point = this.local.getResults().getPoi(0).point; //Erstes intelligentes Suchergebnis abrufen this.map.centerAndZoom(point, 18);
            this.handleMarker(dieser, Punkt);
            console.log("Längengrad: " + point.lng + "--" + "Breitengrad" + point.lat);
            dieser.Breitengrad = Punkt.Breitengrad;
            diese.Länge = Punkt.lng;
          } anders {
            this.$message.error("Kein Standort gefunden!");
          }
        } anders {
          this.$message.error("Keine Suchergebnisse gefunden!");
        }
      },
      // Setze die Markierung handleMarker(obj, point) {
        lass das = dies;
        obj.mk = neuer BMap.Marker(Punkt);
        obj.map.addOverlay(obj.mk);
        obj.mk.enableDragging(); // ziehbar obj.mk.addEventListener("dragend", function (e) {
          // Auf das Ziehen der Annotation achten und nach dem Ziehen Längen- und Breitengrad abrufen that.latitude = e.point.lat;
          dieser.Längengrad = e.Punkt.lng;
        });
        obj.map.panTo(Punkt);
      },
    }
  };
</Skript>
<Stilbereich>
  .form-layer {
    Breite: 100 %;
  }
  #Karte {
    Rand oben: 30px;
    Breite: 100 %;
    Höhe: 300px;
    Rand: 1px durchgehend grau;
    Box-Größe: Rahmenbox;
    Überlauf: versteckt;
  }
  /deep/ .el-dialog {
    Mindestbreite: 550px;
  }
  /deep/ .el-dialog__body {
    Polsterung: 10px;
  }
</Stil>

Dies ist das Ende dieses Artikels zum Aufrufen von Baidu Maps in Vue zum Abrufen von Längen- und Breitengraden. Weitere Informationen zum Aufrufen von Baidu Maps in Vue zum Abrufen von Längen- und Breitengraden finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:

Vue-Beispielcode mit Exif, um den Breiten- und Längengrad des Bildes zu ermitteln
vue implementiert die Positionierungsfunktion auf der Webseite, um Längen- und Breitengrad zu erhalten
Auf ElementUI basierende Vue-Komponente, die V-Model zur Implementierung der Eingabe von Längen- und Breitengraden verwendet

<<: Erweiterte Verwendung von Ansichten, Transaktionen, Indizes, Selbstverbindungen und Benutzerverwaltung in der MySQL-Datenbank – Beispielanalyse

>>: Detaillierte Erklärung der Funktionen von -I (großes i), -L (großes l) und -l (kleines l) beim Kompilieren von Programmen mit g++ unter Linux

So installieren Sie OpenSuse auf Virtualbox

Detaillierte Erläuterung der Docker Fast Build- und Alibaba Cloud-Containerbeschleunigungskonfiguration in der Windows 7-Umgebung

Artikel

Beispiel für die CSS3-Clear-Float-Methode

Artikel

Erstellen Sie mit Node.JS ein Echtzeit-Warnsystem für Unwetter

Artikel

Lösung für das Problem, dass der Text unten links steht und bei der Gestaltung des Textbereichs nicht in der Größe geändert werden kann

Artikel

Bietet hilfreiche Vorschläge zur Verbesserung des Website-Designs

Aufrufen von Baidu Map zum Abrufen von Längen- und Breitengrad in Vue

Vorbereitende Vorbereitung

So installieren Sie OpenSuse auf Virtualbox

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.14

Umfassendes Verständnis der Node-Ereignisschleife

Detaillierte Erläuterung der Docker Fast Build- und Alibaba Cloud-Containerbeschleunigungskonfiguration in der Windows 7-Umgebung

Beispiel für die CSS3-Clear-Float-Methode

Erstellen Sie mit Node.JS ein Echtzeit-Warnsystem für Unwetter

Lösung für das Problem, dass der Text unten links steht und bei der Gestaltung des Textbereichs nicht in der Größe geändert werden kann

Bietet hilfreiche Vorschläge zur Verbesserung des Website-Designs

So ändern Sie $ in # in Linux

Detaillierte Erklärung der Verwendung und Erfahrung mit tinyMCE

Artikel empfehlen

Gemeinsame Überprüfung beider Vue-Felder zur Realisierung der Kennwortänderungsfunktion

Detaillierte Erklärung der Routenkonfiguration von Vue-Router

So rufen Sie die Browser-Sharing-Funktion in Vue auf

25 Beispiele für die Verwendung kreisförmiger Elemente im Webdesign

Detaillierte Erklärung des Unterschieds zwischen Cellspacing und Cellpadding in der Tabelle

Element mit Auswahltabelle zum Ändern des Kontrollkästchens in der Kopfzeile in Textimplementierungscode

JavaScript zum Erzielen eines einfachen Drag-Effekts

SQL-Skriptfunktion zum Schreiben einer PostgreSQL-Datenbank zur Implementierung der Analyse

So konfigurieren Sie Umgebungsvariablen in einer Linux-Umgebung

Webdesign: Skriptmaterialien rekonstruieren das Benutzererlebnis

CentOS 7 Installations- und Konfigurations-Tutorial unter VMware10

MySQL-Optimierungsstrategie (empfohlen)

Beispiel für eine gespeicherte MySQL-Prozedurmethode zum Zurückgeben mehrerer Werte

Installations- und Konfigurationsmethode für komprimierte MySQL Community Server-Pakete

Binäre Typoperationen in MySQL