vue-amap根据地址回显地图并mark的操作


Posted in Javascript onNovember 03, 2020

实现了地图选址功能后,现在来实现一个根据地址回显地图并标记的功能,效果图如下:

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/>'
})

调用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的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS中剪贴板兼容性、判断复制成功或失败
Mar 09 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
Apr 24 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
Nov 18 Javascript
javascript 分号总结及详细介绍
Sep 24 Javascript
Vue.js表单控件实践
Oct 27 Javascript
Javascript之图片的延迟加载的实例详解
Jul 24 Javascript
JS 仿支付宝input文本输入框放大组件的实例
Nov 14 Javascript
vue better-scroll插件使用详解
Jan 25 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
Jun 25 Javascript
javascript 数组精简技巧小结
Feb 26 Javascript
微信小程序收藏功能的实现代码
Jun 19 Javascript
JS ES6异步解决方案
Apr 29 Javascript
ant-design-vue中tree增删改的操作方法
Nov 03 #Javascript
Vue+Vant 图片上传加显示的案例
Nov 03 #Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
Nov 03 #Javascript
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 #Javascript
React Ant Design树形表格的复杂增删改操作
Nov 02 #Javascript
vue缓存之keep-alive的理解和应用详解
Nov 02 #Javascript
详解vue-router的导航钩子(导航守卫)
Nov 02 #Javascript
You might like
总集篇&特番节目先行播出!《SAO Alicization War of Underworld》第2季度TV动画4月25日放送!
2020/03/06 日漫
PHP概述.
2006/10/09 PHP
用php写的serv-u的web申请账号的程序
2006/10/09 PHP
laravel安装zend opcache加速器教程
2015/03/02 PHP
php实现转换html格式为文本格式的方法
2016/05/16 PHP
php文件操作之文件写入字符串、数组的方法分析
2019/04/15 PHP
更正确的asp冒泡排序
2007/05/24 Javascript
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
javascript实现随机读取数组的方法
2015/08/03 Javascript
jquery实现鼠标悬浮停止轮播特效
2020/08/20 Javascript
Javascript之Date对象详解
2016/06/07 Javascript
如何解决hover在ie6中的兼容性问题
2016/12/15 Javascript
Bootstrap模态窗口源码解析
2017/02/08 Javascript
js实现常见的工具条效果
2017/03/02 Javascript
javascript数据结构中栈的应用之符号平衡问题
2017/04/11 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
关于vue 结合原生js 解决echarts resize问题
2020/07/26 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
vue中利用three.js实现全景图的完整示例
2020/12/07 Vue.js
Python中使用HTMLParser解析html实例
2015/02/08 Python
python实现的简单窗口倒计时界面实例
2015/05/05 Python
简介Python中用于处理字符串的center()方法
2015/05/18 Python
python3爬虫之设计签名小程序
2018/06/19 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
快速解决pyqt5窗体关闭后子线程不同时退出的问题
2019/06/19 Python
应用OpenCV和Python进行SIFT算法的实现详解
2019/08/21 Python
python multiprocessing多进程变量共享与加锁的实现
2019/10/02 Python
美国中小型企业领先的办公家具供应商:Office Designs
2016/11/26 全球购物
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
外贸业务员求职信范文
2013/12/12 职场文书
民主生活会发言材料
2014/10/20 职场文书
2014年团队工作总结
2014/11/24 职场文书
中班下学期个人工作总结
2015/02/12 职场文书
nginx基于域名,端口,不同IP的虚拟主机设置的实现
2021/03/31 Servers