Vue nutzt Amap zur Realisierung der Stadtpositionierung

Vue nutzt Amap zur Realisierung der Stadtpositionierung

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

Klicken Sie auf das Frontend-Auswahlfeld, um zur Kartenstandortauswahlseite zu gelangen

<van-row Klasse="Adressartikel">
  <van-col span="6" class="item-title">Lieferadresse</van-col>
  <van-col span="18">
  <p Klasse="Artikel">
  <van-icon name="Pfeil" Klasse="Pfeil"/>
  <van-icon name="Standort-o" />
  <span><van-field v-model="mapname" placeholder="Klicken, um auszuwählen" readonly v-on:click="mapaddress"/></span>
  </p>
  </van-col>
</van-row>

Zweitens lösen Sie das Klickereignis aus

Kartenadresse(){
   und a=this.$route.query.id
  localStorage.setItem('Namen',diese.Namen);
  localStorage.setItem('Telefon',dieses.Telefon);
  localStorage.setItem('AdressDetail',this.AdressDetail);
  localStorage.setItem('Postleitzahl',diese.Postleitzahl);
  localStorage.setItem('überprüft',dies.überprüft);
  dies.$router.push({
    Pfad: '/mapLocation',
    Abfrage: {id:a,are:this.are}
  })
}

Drei Seiten zur Kartenstandortauswahl

Verwenden Sie ifarm, um die Amap-Komponente einzubetten. Beachten Sie, dass Sie für die Verwendung der Karte einen Schlüssel beantragen müssen. Wählen Sie bei der Beantragung den Dienst entsprechend Ihren Anforderungen aus.

<Vorlage>
  <iframe id="Adresse abrufen" @load="loadiframe"
    src="https://m.amap.com/picker/?keywords=Bürogebäude, Gemeinde, Schule&zoom=15&center=&radius=1000&total=20&key=der Schlüssel, den Sie beantragt haben"
    Stil = "Breite: 100 %; Höhe: 100 %; Position: absolut; Z-Index: 22222;">
  </iframe>
</Vorlage>

4. Nachdem die Karte geladen ist, wählen Sie die Adresse aus und springen Sie zur übergeordneten Seite

Da meine Anforderung darin besteht, nach der Eingabe auf die übergeordnete Seite zu springen, wird das Formular der übergeordneten Seite aktualisiert, sodass ein Cache-Vorgang durchgeführt wird.

ladeiframe() {
  let iframe = document.getElementById('getAddress').contentWindow;
  iframe.postMessage('hallo', 'https://m.amap.com/picker/');
  window.addEventListener("Nachricht", Funktion (e) {
  wenn (e.data.command != "COMMAND_GET_TITLE") {
  //Geschäftscode implementieren let a=this.$route.query.id
  lass sind = this.$route.query.are
  let Adresse = e.data.address
  let Standort = e.data.location
  let name = e.data.name
  dies.$router.push({
  Pfad: '/addressFill',
    Abfrage: {Adresse:Adresse,Standort:Standort,Name:Name,ID:a,sind:sind}
  })

  }

  }.bind(dies), false);
},

5. Cache-Verarbeitung

Beim Sprung auf die Unterkartenauswahlseite werden die Formulardaten im Cache gespeichert. Beim Zurückspringen auf die Unterseite werden die Formulardaten der aktuellen Seite nicht aktualisiert.

localStorage.setItem('Namen',diese.Namen);
localStorage.setItem('Telefon',dieses.Telefon);
localStorage.setItem('AdressDetail',this.AdressDetail);
localStorage.setItem('Postleitzahl',diese.Postleitzahl);
localStorage.setItem('überprüft',dies.überprüft);

6. Leeren Sie den Cache

Durch das Caching wird das Problem gelöst, dass eine Seite keine Daten zurückgibt. Gleichzeitig bleibt der Cache dieser Seite jedoch immer vorhanden. Daher wird bei der Rückgabe der aktuellen Seite eine Überprüfung durchgeführt und der Cache geleert.

let addressDetail = localStorage.getItem('addressDetail');

wenn(addressDetail!=undefiniert&&addressDetail!=null&&addressDetail!=""){
  this.addressDetail=Adressdetail
  localStorage.removeItem("Adressdetail");
}anders{
  this.addressDetail=""
}

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:
  • Best Practices für die Entwicklung von Amap-Anwendungen mit Vue
  • vue + Amap realisiert Kartensuche und Klickpositionierungsvorgang
  • Implementierung der Amap-Einführung und Trajektorienzeichnung in Vue
  • Vue stellt den Implementierungscode von AMap Gaode Map vor
  • Wissen Sie, wie Sie natives Amap in Vue verwenden?

<<:  mysql: [FEHLER] unbekannte Option '--skip-grant-tables'

>>:  Detailliertes Tutorial zum Hochladen und Konfigurieren von JDK und Tomcat unter Linux

Artikel empfehlen

Tutorial zur Installation der DAMO-Datenbank auf Centos7

1. Vorbereitung Nach der Installation des Linux-B...

Lösen Sie das Spleißproblem beim Löschen von Bedingungen in myBatis

Ich habe heute gerade Mybatis gelernt und einige ...

jQuery-Plugin zur Implementierung des Dashboards

Das jQuery-Plug-In implementiert das Dashboard zu...

Der Prozess der Bereitstellung eines Projekts auf einem anderen Host mit Jenkins

Umfeld Hostname IP-Adresse Aufschlag Jenkins 192....

Eine kurze Diskussion über die Rolle leerer HTML-Links

Leerer Link: Das heißt, es besteht keine Verbindu...

Beispielcode zur Implementierung der Google-Anmeldung über Drittanbieter in Vue

Inhaltsverzeichnis 1. Konfiguration der Entwickle...

Detaillierte Erklärung des Unterschieds zwischen CSS-Link und @import

Wie fügt man CSS in HTML ein? Es gibt drei Möglic...

So importieren Sie CSS-Stile in externe HTML-Stylesheets

Der Link-In-Stil besteht darin, alle Stile in ein...

So begrenzen Sie die Anzahl der Datensätze in einer Tabelle in MySQL

Inhaltsverzeichnis 1. Lösung auslösen 2. Partitio...

9 praktische Tipps zum Erstellen von Webinhaltsseiten

Inhalt 1. Geben Sie den Lesern einen Grund zu blei...

Analyse der Unfallursachen durch Unicode-Signatur BOM

Möglicherweise verwenden Sie hier Include-Dateien,...

Verwendung von Markierungs-Tags im CSS-Listenmodell

In diesem Artikel werden hauptsächlich die Stilat...

MySQL-Lösung zum Erstellen eines horizontalen Histogramms

Vorwort Histogramme sind grundlegende statistisch...