（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. 针对新手 按照使用顺序和频率整理的git常用指令

    PS:以下内容中的所有 aaaaaa 均为可替换的自定义内容 git status 查看当前版本状态,判断有没有未提交的变动 git add . 添加到暂存区(注意有个点)git commit -m ...

  2. redis安装与连接

    安装(centos7): yum install redis 启动与停止: systemctl start redis. service systemctl stop redis.service 修改 ...

  3. CSP-J2021 题解

    分糖果 题意 选择L~R中的某个数 , 使得x mod k的结果最大. 思路 分两种情况考虑: 若 L 和 R 对 K 取模后在同一区间,则必然在 x=R 位置取到最大值: 否则 L~R 必然跨越多个 ...

  4. Apache DolphinScheduler 架构演进介绍及开源经验分享 - eBay 阮文俊

    引言 来自 eBay 的文俊同学在近期的上海开源大数据 Meetup 上做了十分精彩的 "Apache DolphinScheduler 的架构演进" 分享.本次分享有近 200 ...

  5. 即席查询（Ad Hoc）如何做到又快又稳？

    数字化与数字生态建设,是当前所有企业成长发展的必经之路.随着"加强新型基础设施建设"第一次被写入政府工作报告,5G.人工智能.工业互联网.智慧城市等新型基建彻底激发了数字的价值. ...

  6. Apache DolphinScheduler 使用文档（2-3/8）：集群规划及环境准备

    本文章经授权转载,原文链接: https://blog.csdn.net/MiaoSO/article/details/104770720 目录 2. 集群规划 2.1 集群配置 2.2 软件版本 2 ...

  7. flask 可插拔视图

    Flask 0.7 版本引入了可插拨视图.可插拨视图基于使用类来代替函数,其灵感来自于 Django 的通用视图.可插拨视图的主要用途是用可定制的.可插拨的视图来替代部分 实现.普通的函数视图 演示代 ...

  8. 【java】学习路径38-数学模型分析：不同方式复制文件所需的时间

    测试文件:一段72kb的文本.约5.6MB大小的pdf论文.约38.9MB大小的无损音频文件. demo001 论<到灯塔去>的凝视主题.pdf irreplaceable.movpkg ...

  9. LibreCAD常用命令

    目录 常见命令 常见命令 .text_center { text-align: center } \3cp>.text_left { } 动作命令 命令 绘制直线 相对坐标系 @长度<角度 ...

  10. Linux常用基础命令三

    一.ln 软链接 软链接也称为符号链接,类似于 windows 里的快捷方式,有自己的数据块,主要存放 了链接其他文件的路径. 在查看文件目录中,软连接是以'l'开头 创建软链接 ln -s [原文件 ...