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 相关文章推荐
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
Oct 11 Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
Dec 23 Javascript
AngularJS动态绑定HTML的方法分析
Nov 07 Javascript
js代码实现下拉菜单【推荐】
Dec 15 Javascript
javascript阻止事件冒泡和浏览器的默认行为
Jan 21 Javascript
原生JS改变透明度实现轮播效果
Mar 24 Javascript
js HTML5 canvas绘制图片的方法
Sep 08 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
Jan 19 Javascript
微信小程序Flex布局用法深入浅出分析
Apr 25 Javascript
简单聊聊TypeScript只读修饰符
Apr 06 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
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
CI框架(CodeIgniter)公共模型类定义与用法示例
2017/08/10 PHP
提高网站信任度的技巧
2008/10/17 Javascript
JavaScript 常用函数
2009/12/30 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
2010/03/24 Javascript
Javascript 类与静态类的实现(续)
2010/04/02 Javascript
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
JavaScript闭包实例讲解
2014/04/22 Javascript
js实现大转盘抽奖游戏实例
2015/06/24 Javascript
Node.js开发者必须了解的4个JS要点
2016/02/21 Javascript
javascript js 操作数组 增删改查的简单实现
2016/06/20 Javascript
JavaScript中三种常见的排序方法
2017/02/24 Javascript
vue中页面跳转拦截器的实现方法
2017/08/23 Javascript
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
JavaScript 判断对象中是否有某属性的常用方法
2018/06/14 Javascript
vue-router history模式下的微信分享小结
2018/07/05 Javascript
Python回调函数用法实例详解
2015/07/02 Python
Python 常用string函数详解
2016/05/30 Python
python实现微信自动回复机器人功能
2019/07/11 Python
解决Django一个表单对应多个按钮的问题
2019/07/18 Python
Python 脚本的三种执行方式小结
2019/12/21 Python
Joules美国官网:出色的英国风格
2017/10/30 全球购物
马来西亚银饰品牌:JEOEL
2017/12/15 全球购物
摩托车和ATV零件、配件和服装的首选在线零售商:MotoSport
2017/12/22 全球购物
外语专业毕业生自我评价分享
2013/10/05 职场文书
简历中自我评价范文3则
2013/12/14 职场文书
优秀演讲稿范文
2013/12/29 职场文书
局火灾防控工作方案
2014/05/25 职场文书
本科毕业生求职信
2014/06/15 职场文书
小学生一分钟演讲稿
2014/08/26 职场文书
2014企业领导班子四风对照检查材料思想汇报
2014/09/17 职场文书
对外汉语专业大学生职业生涯规划书
2014/10/11 职场文书
2015年质检工作总结
2015/05/04 职场文书
vue-cropper组件实现图片切割上传
2021/05/27 Vue.js
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python