VueはAmapを使用して都市の位置特定を実現

この記事では、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&center=&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 を応援していただければ幸いです。

以下もご興味があるかもしれません: