实现了地图选址功能后,现在来实现一个根据地址回显地图并标记的功能,效果图如下:
直接上代码:
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,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的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月23日
2024年09月23日
- 金池VS刘罡2009《双声情》[WAV+CUE]
- 冯奥迪《卄》[320K/MP3][67.08MB]
- 冯奥迪《卄》[FLAC/分轨][172.46MB]
- Merryland《Merryland》[320K/MP3][69.48MB]
- 苏芮.1991-停在我心里的温柔【福茂】【WAV+CUE】
- 苏慧伦.2020-面面Every.Side.of.Me【相信音乐】【WAV+CUE】
- 群星.1991-不一样的感觉REMIX【宝丽金】【WAV+CUE】
- 银霞.1983-《你那好冷的小手》珍藏纪念版[WAV分轨]
- 银霞.2002-《国语巨星专辑VOL.3》2CD台湾版[WAV+CUE]
- 金池刘罡《昨日情歌HQ》头版限量编号[低速原抓WAV+CUE]
- 段奥娟.2024-23·岁碎念【白米范】【FLAC分轨】
- 顺子.2001-昨日·唯一·更多·顺子自选辑【魔岩】【WAV+CUE】
- 无印良品.1999-私藏三首·原创相对论(EP)【滚石】【WAV+CUE】
- Merryland《Merryland》[FLAC/分轨][170.22MB]
- 庄锭欣 ELKIE《没有你的未来》[320K/MP3][15.78MB]