这篇文章主要介绍了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: '' })
调用showMap组件的文件
<div class="myIndexWrap"> <!-- 根据地址信息显示地图位置 --><div class="addrMapWrapper"> <h3>根据地址信息显示地图位置</h3><div class="addrWrapper"> <p>{{selAddr}}</p></div></div></div>
.myIndexWrap { width: 1200px; min-height: 800px; height: auto; border: 1px solid #000; display: flex; flex-flow: column; h3 { padding-left: 50px; } // 地图<i style="color:transparent">本文来源gaodai$ma#com搞$$代**码网$</i>标记 .addrMapWrapper { .addrWrapper{ margin-left: 50px; } } }
ShowMap.vue
<div class="showMapWrapper"> </div>
.showMapWrapper { width: 500px; height: 500px; border: 1px solid #999; }
大功告成~
补充知识：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的操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持gaodaima搞代码网。
以上就是vue-amap根据地址回显地图并mark的操作的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue-amap根据地址回显地图并mark的操作
转载请注明原文链接：vue-amap根据地址回显地图并mark的操作
