實現了地圖選址功能後，現在來實現一個根據地址回顯地圖並標記的功能，效果圖如下：

直接上程式碼：

main.js中引入

import Vue from 'vue'
import VueAMap from 'vue-amap'
import App from './App'
import router from './router'
Vue.config.productionTip = false
localStorage.clear();
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
 //高德的key
 key: "cc644a48b701c256e9a827f068743fdd",// 外掛集合
 plugin: [
  "AMap.Autocomplete",// 輸入提示外掛 
  "AMap.PlaceSearch",// POI搜尋外掛
  "AMap.Scale",// 右下角縮圖外掛 比例尺
  "AMap.OverView",// 地圖鷹眼外掛
  "AMap.ToolBar",// 地圖工具條
  "AMap.MapType",// 類別切換控制元件，實現預設圖層與衛星圖、實施交通圖層之間切換的控制
  "AMap.PolyEditor",// 編輯 折線多，邊形
  "AMap.CircleEditor",// 圓形編輯器外掛
  "AMap.Geolocation",// 定位控制元件，用來獲取和展示使用者主機所在的經緯度位置
  "AMap.Geocoder",// 地理編碼與逆地理編碼服務，用於地址描述與座標間的相互轉換
  "AMap.AMapUI",// UI元件
 ],v: "1.4.4",uiVersion: "1.0.11" // 版本號
});
 
/* eslint-disable no-new */
 
new Vue({
 el: '#app',router,components: { App },template: '<App/>'
})

呼叫showMap元件的檔案

<template>
 <div class="myIndexWrap">
  <!-- 根據地址資訊顯示地圖位置 -->
  <div class="addrMapWrapper">
   <h3>根據地址資訊顯示地圖位置</h3>
   <div class="addrWrapper">
    <p>{{selAddr}}</p>
    <ShowMap class="showMapBox" :selAddr="selAddr"/>
   </div>
  </div>
 </div>
</template>

<script type='text/ecmascript-6'>
import ShowMap from "@/components/ShowMap.vue";//地圖示記
 
export default {
 components: {
  ShowMap
 },data() {
  return {
   selAddr:'江蘇省南京市雨花臺區新華匯B2座',};
 },};
</script>

<style lang='scss' scoped>
.myIndexWrap {
 width: 1200px;
 min-height: 800px;
 height: auto;
 border: 1px solid #000;
 display: flex;
 flex-flow: column;
 h3 {
  padding-left: 50px;
 }
 // 地圖示記
 .addrMapWrapper {
  .addrWrapper{
   margin-left: 50px;
  }
 }
}
</style>

ShowMap.vue

<template>
 <div class="showMapWrapper">
  <el-amap
   vid="map"
   class="amap-box"
   :zoom="zoom"
   :plugin="plugin"
   :events="events"
   :center="center"
  >
  <el-amap-marker vid="marker" :position="center" :label="label"></el-amap-marker>
  </el-amap>
 </div>
</template>

<script type='text/ecmascript-6'>
export default {
 components: {},props:{
  selAddr:{
   type:String,default:''
  }
 },data() {
  let self = this;
  return {
   zoom: 18,lng: 0,lat: 0,loaded: false,address: this.selAddr,//mark的時候顯示tip
   label:{
    content:this.selAddr,offset:[10,12]
   },center: [0,0],//外掛集合
   plugin: [
    //工具條
    {
     pName: "ToolBar",positon: "LB"
    },],events: {
    init(map) {
     // 這裡通過高德 SDK 完成。
     var geocoder = new AMap.Geocoder({
      radius: 1000,extensions: "all",city: "全國"
     });
     geocoder.getLocation(self.address,(status,result) => {
      if (status === "complete" && result.geocodes.length) {
       let lnglat = result.geocodes[0].location
       self.lng = lnglat.lng;
       self.lat = lnglat.lat;
       self.center = [self.lng,self.lat];
      }
     });
    }
   }
  };
 },};
</script>

<style lang='scss' scoped>
.showMapWrapper {
 width: 500px;
 height: 500px;
 border: 1px solid #999;
}
</style>

大功告成~

補充知識：vant 中 AddressEdit 地址編輯 設定手機號格式校驗

使用AddressEdit 元件中的 tel-validator 手機號格式校驗API

新增 :tel-validator=“validator”

 <VanAddressEdit
   :area-list="areaList"
   :address-info="addressInfo"
   :show-delete="Boolean(editId)"
   show-postal
   :is-saving="isSaving"
   :is-deleting="isDeleting"
   save-button-text="儲存並使用"
   delete-button-text="刪除收貨地址"
   @save="onSave"
   @delete="onDelete"
   :tel-validator="validator"
  >

在methods中用正則設定需要的手機號格式

methods: {
  validator(e) {
   console.log(e);
   let myreg1 = /^[1][3,4,5,7,8][0-9]{9}$/;
   let myreg2 = /^[2][3,8][0-9]{6}$/;
   if (!myreg1.test(e) && !myreg2.test(e)) {
    console.log("手機號錯誤");
    return false;
   } else{
    console.log('手機號正確')
    return true
   }
  },}

以上這篇vue-amap根據地址回顯地圖並mark的操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。