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¢er=&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:
|
<<: mysql: [FEHLER] unbekannte Option '--skip-grant-tables'
>>: Detailliertes Tutorial zum Hochladen und Konfigurieren von JDK und Tomcat unter Linux
1. Vorbereitung Nach der Installation des Linux-B...
Ich habe heute gerade Mybatis gelernt und einige ...
Das jQuery-Plug-In implementiert das Dashboard zu...
Umfeld Hostname IP-Adresse Aufschlag Jenkins 192....
Leerer Link: Das heißt, es besteht keine Verbindu...
Inhaltsverzeichnis 1. Konfiguration der Entwickle...
Wie fügt man CSS in HTML ein? Es gibt drei Möglic...
Der Link-In-Stil besteht darin, alle Stile in ein...
Inhaltsverzeichnis 1. Lösung auslösen 2. Partitio...
Nachfragehintergrund: Fügen Sie dynamische GIF-Bi...
Inhalt 1. Geben Sie den Lesern einen Grund zu blei...
Möglicherweise verwenden Sie hier Include-Dateien,...
Folgendes ist passiert. Heute habe ich mit GitHub...
In diesem Artikel werden hauptsächlich die Stilat...
Vorwort Histogramme sind grundlegende statistisch...