实现了地图选址功能后,现在来实现一个根据地址回显地图并标记的功能,效果图如下:
直接上代码:
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: '' })
调用showMap组件的文件
根据地址信息显示地图位置
{{selAddr}}
ShowMap.vue
大功告成~
补充知识:vant 中 AddressEdit 地址编辑 设置手机号格式校验
使用AddressEdit 组件中的 tel-validator 手机号格式校验API
添加 :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的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。