热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

这篇文章主要介绍了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组件的文件



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


推荐阅读
  • Asp.net MVC 中 Bundle 配置详解:合并与压缩 JS 和 CSS 文件
    本文深入探讨了 Asp.net MVC 中如何利用 Bundle 功能来合并和压缩 JavaScript 和 CSS 文件,提供了详细的配置步骤和示例代码,适合开发人员参考学习。 ... [详细]
  • 优化Input Checkbox与Label文本对齐的方法
    本文探讨了在网页设计中,如何有效解决input checkbox与label文字不对齐的问题。通过具体的代码实例和解决方案,帮助开发者实现更加美观的用户界面。 ... [详细]
  • 优雅实现 jQuery 折叠展开下拉菜单
    本文介绍了一种使用 jQuery 实现的优雅折叠和展开效果的下拉菜单,通过简单的 HTML 结构和 CSS 样式,结合 jQuery 脚本,可以轻松创建出美观且功能强大的下拉菜单。 ... [详细]
  • 深入解析IGMP各版本特性及其演进
    本文详细探讨了Internet组管理协议(IGMP)的不同版本,包括IGMPv1的基础功能、IGMPv2的增强特性和IGMPv3的重要改进。特别分析了IGMPv3如何支持特定源组播(SSM)模型,并介绍了各版本之间的主要差异。 ... [详细]
  • YB02 防水车载GPS追踪器
    YB02防水车载GPS追踪器由Yuebiz科技有限公司设计生产,适用于车辆防盗、车队管理和实时追踪等多种场合。 ... [详细]
  • Java与JSON互转:实现JSON到Java对象及Java对象到JSON的转换
    本文详细介绍了如何在Java中实现JSON数据与Java对象之间的相互转换,包括代码示例和常见问题解决方法。 ... [详细]
  • MySQL锁机制详解
    本文深入探讨了MySQL中的锁机制,包括表级锁、行级锁以及元数据锁,通过实例详细解释了各种锁的工作原理及其应用场景。同时,文章还介绍了如何通过锁来优化数据库性能,避免常见的并发问题。 ... [详细]
  • 本文探讨了如何利用SqlDependency执行复杂的SQL查询,并确保在多线程环境下的安全性与效率。 ... [详细]
  • Python数据类型6 字典
    字典Python的字典数据类型是基于hash散列算法实现的,采用键值对(key:value)的形式,根据key的值计算value的地址,具有非常快的查取和插入速度。但它是无序的,包 ... [详细]
  • 本文详细介绍了ActivityManagerService (AMS) 的工作原理及其在Android系统中的重要角色。AMS作为system_server进程的一部分,在系统启动时加载,负责管理和协调应用程序中的Activity和服务(Service)。文章将通过具体的接口图和通信流程,帮助读者更好地理解AMS的工作机制。 ... [详细]
  • EasyMock实战指南
    本文介绍了如何使用EasyMock进行单元测试,特别是当测试对象的合作者依赖于外部资源或尚未实现时。通过具体的示例,展示了EasyMock在模拟对象行为方面的强大功能。 ... [详细]
  • 题目 CF1245F: 清理春天的数学挑战 描述了一个数学问题:给定一个区间 [L, R](0 ≤ L, R ≤ 10^9),求该区间内满足 x + y = x ∧ y 的数对 (x, y) 的总数。 ... [详细]
  • 本文深入探讨了JavaScript中实现继承的四种常见方法,包括原型链继承、构造函数继承、组合继承和寄生组合继承。对于正在学习或从事Web前端开发的技术人员来说,理解这些继承模式对于提高代码质量和维护性至关重要。 ... [详细]
  • 本文详细介绍了在使用Socket进行网络编程时,遇到链接器错误`undefined reference to WSAStartup@8`的解决方案,适用于多种开发环境。 ... [详细]
  • python开发mysql:单表查询&多表查询
    一单表查询,以下是表内容二多表查询,一下是表内容三总结&表创建过程单 ... [详细]
author-avatar
栋哥0822_893
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有