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

CSS3 realisiert Textreliefeffekt, Gravureffekt, Flammentext

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

Vorbereitende Vorbereitung

CSS3 realisiert Textreliefeffekt, Gravureffekt, Flammentext

Das WeChat-Applet realisiert ein Verknüpfungsmenü

Tutorial zur Samba-Konfiguration für die Dateifreigabe im Linux-System

Docker-Lösung zum Anmelden ohne Root-Rechte

Benutzerzentriertes Design

Detaillierte Codebeispiele zu sieben Methoden zur vertikalen Zentrierung mit CSS

Einführung in die Containerfunktion of() in der Linux-Kernel-Programmierung

Docker erstellt eine Jenkins+Maven-Plattform zum Erstellen und Bereitstellen von Code

Analyse des Prozesses zum Aufbau einer Clusterumgebung mit Apache und Tomcat

Installieren und verwenden Sie Git und GitHub unter Ubuntu Linux

Artikel empfehlen

Ein Fehler wurde behoben, der dadurch verursacht wurde, dass die Bildlaufleiste Platz einnahm

Code zur Änderung des CSS-Bildlaufleistenstils

Details zur Ereignisbindung reagieren

Informationen zum Konfigurationsproblem bei der Verbindung von MyBatis mit der MySql8.0-Version

JS implementiert einfachen Beispielcode zur Steuerung der Videowiedergabegeschwindigkeit

Fallstricke bei der Installation der dekomprimierten Version von MySQL 5.7.20 (empfohlen)

Installieren Sie Ethereum/Ethereum von Grund auf unter CentOS7

Tutorial zur Installation der dekomprimierten Version von mysql-8.0.15-winx64 und drei Möglichkeiten zum Beenden

Detaillierte Erklärung der JS-Array-Methoden

Im Mybatis MySQL-Löschvorgang kann nur die erste Datenmethode gelöscht werden

Anwendung von HTML und CSS in Flash

Schritte zur Erstellung einer React Fiber-Struktur

MySQL 8.0.3 RC steht kurz vor der Veröffentlichung. Werfen wir einen Blick auf die Änderungen

Das WeChat-Applet implementiert die Aufnahmefunktion

Beispiel für utf8mb4-Sortierung in MySQL