この記事では、Amapを使用して都市の位置特定を実現するVueの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 フロントエンドの選択ボックスをクリックすると、マップサイトの選択ページに移動します。 <van-row class="address_item"> <van-col span="6" class="item-title">配送先住所</van-col> <バン-コル span="18"> <p class="item"> <van-icon name="arrow" class="arrow"/> <van-icon name="location-o" /> <span><van-field v-model="mapname" placeholder="クリックして選択" readonly v-on:click="mapaddress"/></span> </p> </バン-コル> </van-row> 次にクリックイベントをトリガーします マップアドレス(){ et a=this.$route.query.id localStorage.setItem('names',this.names); localStorage.setItem('phone',this.phone); localStorage.setItem('addressDetail',this.addressDetail); localStorage.setItem('郵便番号',this.郵便番号); localStorage.setItem('checked',this.checked); this.$router.push({ パス: '/mapLocation', クエリ: {id:a,are:this.are} }) } 3つの地図サイト選択ページ Amapコンポーネントを埋め込むにはifarmをご利用ください。Amapマップを利用するにはキーの申請が必要ですので、申請の際はご自身のニーズに合わせてサービスを選択してください。 <テンプレート> <iframe id="getAddress" @load="iframeを読み込む" src="https://m.amap.com/picker/?keywords=オフィスビル、コミュニティ、学校&zoom=15¢er=&radius=1000&total=20&key=申請したキー" スタイル="幅:100%; 高さ:100%;位置: 絶対;z-index:22222;"> </iframe> </テンプレート> 4. 地図が読み込まれたら、住所を選択して親ページに移動します 私の要件は、入力後に親ページにジャンプすることなので、親ページのフォームが更新され、キャッシュ処理が行われます。 ロードフレーム() { iframe = document.getElementById('getAddress').contentWindow; とします。 iframe.postMessage('hello', 'https://m.amap.com/picker/'); window.addEventListener("メッセージ", 関数(e) { if (e.data.command != "COMMAND_GET_TITLE") { //ビジネスコードを実装する let a=this.$route.query.id are = this.$route.query.are とします アドレス = e.data.address とします location = e.data.location とします 名前 = e.data.name とする this.$router.push({ パス: '/addressFill', クエリ: {address:住所、location:場所、name:名前、id:a、are:are} }) } }.bind(this), false); }, 5. キャッシュ処理 サブマップ選択ページにジャンプすると、フォーム データはキャッシュに保存されます。サブページに戻ると、現在のページのフォーム データは更新されません。 localStorage.setItem('names',this.names); localStorage.setItem('phone',this.phone); localStorage.setItem('addressDetail',this.addressDetail); localStorage.setItem('郵便番号',this.郵便番号); localStorage.setItem('checked',this.checked); 6. キャッシュをクリアする キャッシュは、ページがデータを返さない問題を解決しますが、同時に、このページのキャッシュは常に存在します。そのため、現在のページを返すときに検証が実行され、キャッシュがクリアされます。 addressDetail = localStorage.getItem('addressDetail'); を取得します。 if(addressDetail!=undefined&&addressDetail!=null&&addressDetail!=""){ this.addressDetail=住所の詳細 localStorage.removeItem("アドレスの詳細"); }それ以外{ this.addressDetail="" } 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: mysql: [エラー] 不明なオプション '--skip-grant-tables'
>>: Linux での JDK と Tomcat のアップロードと設定に関する詳細なチュートリアル
Flex レイアウトの紹介英語の Flex はフレキシブル ボックス、つまり伸縮性のあるボックスを...
以前、上司からログイン後にチェックマークを表示できるプログラムを作るように言われたのですが、Baid...
方法1コードをコピーコードは次のとおりです。 document.getElementById(&qu...
背景AWS EC2 を使用するプロジェクトサービスがあります。セキュリティとパフォーマンスを考慮して...
mysql テーブル作成 SQL ステートメントMySQL テーブルを作成するための一般的な SQL...
HTML では、<img> タグはテキスト内の画像タグを定義するために使用されます。その...
<br />帯域幅の増加に伴い、Web ページ上のオブジェクトも増えているため、Web ...
目次1. MySQLをダウンロードする1.1 ダウンロード1.2 インストール1. MySQLをダウ...
基本概念現在の読み取りとスナップショットの読み取りMVCC では、読み取り操作はスナップショット読み...
目次1. Promiseとは何か2. 基本的な使い方3. Promiseメソッド3.1 Promis...
display:bolck/none によるメニューバーの完成の効果 図 1:まず、完成したエフェク...
比較的シンプルな業務のプロジェクトもありますが、フロントエンドのページングを多用します。プラグインの...
jQuery フォーム検証の例 / ユーザー名、パスワード、住所、電子メールの検証を含む下記の通り ...
ページ上で PDF をプレビューすると、一部のファイルは印刷またはダウンロードできません。現時点では...
目次1. ソフトウェアパッケージ2. gccをインストールする3. libfastcommonをイン...