（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. 以十字链表为存储结构实现矩阵相加（严5.27）--------西工大noj

    #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> typedef int ElemT ...

  2. [NOIP2015 提高组] 运输计划题解

    题目链接:P2680 [NOIP2015 提高组] 运输计划 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 看了好长时间题解才终于懂的,有关lca和二分答案的题解解释的不详细,一时 ...

  3. 2022-7-21 第七组 pan小堂 继承与super与this

    1.继承 1.1继承的概述 在现实生活中,继承一般指的是子女继承父辈的财产.在程序中,继承描述的是事物之间的所属关系,通过继承可以使多种事物之间形成一种关系体系. 1.2继承的格式 class 子类 ...

  4. 反射概述和反射获取字节码Class对象的三种方式

    反射:框架设计的灵魂 框架:半成品软件.可以在框架的基础上进行软件开发,简化变法 反射:将类的各个组成部分封装为其他对象,这就是反射机制 好处: 1.可以在程序运行的过程中操作这些对象. 2.可以解耦 ...

  5. go更新腾讯云DNSPod的解析记录

    纯粹练手用的,大家轻喷 获取SecretId,SecretKey 打开腾讯云,登录之后打开https://console.cloud.tencent.com/cam/capi,然后新建密钥记录生成的S ...

  6. java字符串类型数学运算表达式以及精度丢失问题

    字符串类型数学运算精度丢失问题 方式一:ScriptEngine 会精度丢失,可执行连续双括号 方式二:hutool ScriptUtil 会精度丢失,可执行连续双括号 方式三:hutool Scri ...

  7. 2511-Druid监控功能的深入使用与配置-如何记录监控数据（基于logback）

    Druid的监控很强大,但可惜的是监控数据是存在内存中的,需求就是定时把监控数据记录下来,以日志文件的形式或者数据库入库. 记录两种方式: 数据库入库 logback形式记录 原理(重点) 如果仅仅想 ...

  8. python对象的独有功能与面向对象的特征

    目录 对象的独有功能 动静态方法 面向对象的特征 面向对象的的三大特征 继承的本质 不继承的名字查找顺序 单继承的名字查找顺序 多继承的名字查找顺序 经典类与新式类 派生方法 对象的独有功能 1.定义 ...

  9. 【springcloud】环境搭建与Rest使快速上手

    SpringCloud环境搭建 --- Rest使用 个人主页:https://www.cnblogs.com/xbudian/ 今天来到SpringCloud的学习,我们从spring boot微服 ...

  10. 八个解决你80%需求的CSS动画库

    八个解决你80%需求的CSS动画库 点击打开视频讲解 在学习和工作的过程中,我们总免不了要写各种各样的css动画,给某个部分添加动画效果,如果觉得自己写的动画效果单一乏味,不妨试试这8个CSS动画库, ...