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

Linux verwendet iftop, um den Netzwerkkartenverkehr in Echtzeit zu überwachen

Artikel empfehlen

MySQL Advanced Learning Notes (Teil 3): Einführung in die logische Architektur von MySQL, detaillierte Erläuterung der MySQL-Speicher-Engine

Einführung in die logische MySQL-Architektur Über...

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

Vorbereitende Vorbereitung

Linux verwendet iftop, um den Netzwerkkartenverkehr in Echtzeit zu überwachen

Referenzieren Sie SVG-Bilder in CSS, um den Implementierungscode für dynamische Farbumschaltung zu unterstützen

Methode und Optimierungsprinzip für langsame MySQL-Abfragen

Das WeChat-Applet implementiert das Schlangenspiel

Einführung in Docker-Container

Eine kurze Erläuterung der vier häufig verwendeten Speicher-Engines in MySQL

Detaillierte Erklärung zur Verwendung von Titel-Tags und Absatz-Tags in XHTML

MySQL-Datenbankoperationen (Erstellen, Auswählen, Löschen)

Über die Position des H1-Tags in XHTML

Zusammenfassung der häufig verwendeten Datenbank- und Tabellen-Sharding-Lösungen von MySQL

Artikel empfehlen

MySQL Advanced Learning Notes (Teil 3): Einführung in die logische Architektur von MySQL, detaillierte Erläuterung der MySQL-Speicher-Engine

Slot-Anordnung und Nutzungsanalyse in Vue

Implementierungscode zur Installation von vsftpd in Ubuntu 18.04

Zeichnen Sie ein Herz mit CSS3

Detaillierte grafische Erklärung der SQLMap-Injektion

Detaillierte Erläuterung des Prinzips und der Verwendung von MySQL-gespeicherten Prozeduren

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.24

So zeigen Sie Bildinformationen in Docker an

JS implementiert den Beispielcode der Dezimalkonvertierung in Hexadezimal

Idea stellt Remote-Docker bereit und konfiguriert die Datei

Lösung für das Problem, dass englische Buchstaben in Firefox nicht umbrochen werden

CSS3-Eigenschaft line-clamp steuert die Verwendung von Textzeilen

Tutorial zum Herunterladen und Installieren der komprimierten Version von MySQL 8.0.16 unter dem Win10-System

Eine einfache und effektive Lösung, um das ursprüngliche Passwort bei der Installation von MySQL zu vergessen

MySQL-Variablenprinzipien und Anwendungsbeispiele