vue-amap 주소 에 따라 지 도 를 표시 하고 mark 작업

지도 주소 선택 기능 을 실현 한 후에 주소 에 따라 지 도 를 표시 하고 표시 하 는 기능 을 실현 합 니 다.효과 도 는 다음 과 같 습 니 다.

직접 코드 올 리 기:
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/>'
})

쇼 맵 구성 요소 파일 호출

<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 에서 Address Edit 주소 편집 설정 핸드폰 번호 형식 검사
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,4,5,7,8][0-9]{6}$/;
   if (!myreg1.test(e) && !myreg2.test(e)) {
    console.log("     ");
    return false;
   } else{
    console.log('     ')
    return true
   }
  },
 }

이상 의 vue-amap 는 주소 에 따라 지 도 를 표시 하고 mark 의 조작 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 께 참고 가 되 고 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.