（1）Npm安装：npm install vue-amap –save

（2）在main.js中配置

首先需要在项目初始化时，通过 initAMapApiLoader 引入所需要的插件：

（3）vue-amap 能够抛开高德原生 SDK 覆盖大多数场景，但对于部分定制化程度较高的场景而言，可能还是需要引入高德原生 SDK 来支持，以 el-amap 组件举例。el-amap 比较特殊，它同时还支持一个 amap-manager 属性，通过这个属性，可以在任何地方拿到高德原生 AMap.Map 实例。

基本显示效果使用如下：

还可直接调用高德的API:

计算两点间的距离

item.distance=Math.round(AMap.GeometryUtil.distance([Number(item.lng), Number(item.lat)],  [Number(this.lng),  Number(this.lat)]))

参考网址：https://elemefe.github.io/vue-amap/#/

Vue-amap的使用的更多相关文章

  1. vue的地图插件amap

    https://www.jianshu.com/p/0011996b81e2(amap) npm install vue-amap --save

  2. 在vue中使用高德地图开发，以及AMap的引入？

    百度引入BMap ,一个import 即可,可AMap 却报AMap is not difined ? 1.首先在 externals: { "BMap": "BMap& ...

  3. vue 调用高德地图

    一. vue-amap,一个基于 Vue 2.x 和高德地图的地图组件 https://elemefe.github.io/vue-amap/#/ 这个就不细说了,按照其文档,就能够安装下来. 二. ...

  4. vue 高德地图之玩转周边

    前言:在之前的博客中,有成功引入高德地图,这是以前的地址  vue 调用高德地图. 因为一些需求,需要使用到地图的周边功能. 完整的项目代码请查看  我的github 一 .先看要实现的结果,参考了链 ...

  5. vue 首页问题

    (现在其实处于不知道自己不知道状态,前端其实很多东东,不信弄个微博试试,还有那些概念的to thi tha) 1.压缩 一般 vue-cli已经压缩了 比如js 的,一般4M多压缩到 1M,还有css ...

  6. vue加载优化策略

    vue.js是一个比较流行的前端框架,与react.js.angular.js相比来说,vue.js入手曲线更加流畅,不管掌握多少都可以快速上手.但是单页面应用也都有其弊病,有时候首屏加载慢的让人捏舌 ...

  7. VUE 高德地图选取地址组件开发

    高德地图文档地址 http://lbs.amap.com/api/lightmap/guide/picker/ 结合步骤: 1.通过iframe内嵌引入高德地图组件 key就选你自己申请的key &l ...

  8. vue 使用高德地图vue-amap组件

    首先    npm install -S vue-amap 然后在 main.js import VueAMap from 'vue-amap'; //注意不要和 AMap原始名称覆盖 Vue.use ...

  9. vue仿微信网页版|vue+web端聊天室|仿微信客户端vue版

    一.项目介绍 基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室— ...

  10. vue项目eslint配置 以及 解释

    // https://eslint.org/docs/user-guide/configuring module.exports = { root: true, parserOptions: { pa ...

随机推荐

  1. 操作表查询&操作表创建&操作表删除&操作表修改

    2.操作表 C(create):创建 语法: create table 表明( 列名1 数据类型1, 列名2 数据烈性2, .... 列名n 数据类型n ); create table Student ...

  2. 浅谈 exgcd

    众所周知欧几里得算法是: \[\gcd(a,b)=\gcd(b,a\bmod \,b) \] 也叫辗转相除法. 拓展欧几里得算法(exgcd),可以用来找到形如 \(ax+by=\gcd(a,b)\) ...

  3. 以寡治众各个击破，超大文件分片上传之构建基于Vue.js3.0+Ant-desgin+Tornado6纯异步IO高效写入服务

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_218 分治算法是一种很古老但很务实的方法.本意即使将一个较大的整体打碎分成小的局部,这样每个小的局部都不足以对抗大的整体.战国时期 ...

  4. [spring]spring详细总结

    spring 1.spring简介 Spring框架是一个开源的应用程序框架,是针对bean的生命周期进行管理的轻量级容器. Spring解决了开发者在J2EE开发中遇到的许多常见的问题,提供了功能强 ...

  5. 困扰所有SAP顾问多年的问题终于解决了

    相信每个从事SAP的顾问都会遇到这样的场景:听着歌,录着SAP数据,写着ABAP代码,突然一切都消失了. 是的,SAP GUI又崩溃闪退了. 可能你还一脸懵逼不知道发生什么事情,当你重新登录系统的时候 ...

  6. ceph 005 赋权补充 rbd块映射

    我的ceph版本 [root@serverc ~]# ceph -v ceph version 16.2.0-117.el8cp (0e34bb74700060ebfaa22d99b7d2cdc037 ...

  7. 【ARK UI】HarmonyOS ETS如何创建PixeMap并显示Image组件上

    ​参考资料 图片处理 Context模块 api讲解 image.createPixelMap createPixelMap(number: fd, options: InitializationOp ...

  8. Spring 01: Spring配置 + IOC控制反转 + Setter注入

    简介 Spring框架是一个容器,是整合其他框架的框架 他的核心是IOC(控制反转)和AOP(面向切面编程),由20多个模块构成,在很多领域都提供了优秀的问题解决方案 特点 轻量级:由20多个模块构成 ...

  9. virsh edit 很慢 的bug

    创建虚拟机,发现virsh edit很慢. strace的结果: 09:26:03 close(10) = -1 EBADF (Bad file descriptor)09:26:03 close(1 ...

  10. 持久化-DLL劫持

    持久化-DLL劫持 原理 通过篡改.替换和代理原dll文件来达到劫持. 原理演示 假定演练流程 假定我们要劫持的目标是 c:\temp\legit.dll 获取 c:\temp\legit.dll 所 ...