（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. maven exclusion 理解

    结论:exclusion 表示对传递性依赖进行排除,排除后当前项目的依赖jar中,就不会包含该传递性依赖. 扩展:项目中的jar 都会在classpath下,排除后的传递性依赖,相当于在classpa ...

  2. Vue3 使用v-md-editor如何动态上传图片了

    Vue3 使用v-md-editor如何动态上传图片了 前端代码: <v-md-editor :autofocus="true" v-model="blog.con ...

  3. python推导式与海象运算符

    背景:介绍两种python用于语句优化的用法 一.推导式 1.推导式简介: Python 推导式是一种独特的数据处理方式,可以从一个数据序列构建另一个新的数据序列的结构体. 支持:列表(list).元 ...

  4. mongo数据库-mongo角色权限

    Built-In Roles(内置角色): 1. 数据库用户角色:read.readWrite; 2. 数据库管理角色:dbAdmin.dbOwner.userAdmin: 3. 集群管理角色:clu ...

  5. 深入分析FragmentPagerAdapter和FragmentStatePagerAdapter

    最近遇到比较奇怪的bug,TableLayout+ViewPager实现点击顶部tab切换viewpager视图.但是在Viewpager设置dapter时,最开始设置的是FragmentPagerA ...

  6. Vue3 Transition 过渡效果之基于 CSS 过渡

    介绍 Transistion 路由组件的切换.动态组件的切换.v-if 条件渲染组件以及 v-show 显示组件原本是没有任何过渡(CSS 动画)效果的.然而,Vue 的内置组件<Transit ...

  7. jQuery 选择器选中某节点，在后续的链式操作函数内使用 $(this) 的结果是 Window 对象，而非该节点对象

    <ul class="tree-ocx"> <li class="tree-ocx-li" data-displayed="fals ...

  8. 如何使用.NET 6的IHostedService和BackgroundService？

    大家好,我是张飞洪,感谢您的阅读,我会不定期和你分享学习心得,希望我的文章能成为你成长路上的垫脚石,让我们一起精进. 本章是<定制ASP NET 6.0框架系列文章>的第七篇.本文内容和定 ...

  9. BI如何配置“花生壳”，看这一篇就够了

    花生壳作为一款免费的内网穿透软件,在软件行业备受青睐.在做好产品的同时,如何让客户轻松看到,也是非常有必要的.本篇将带领大家使用"花生壳"软件完成BI数据分析的配置.第一步:下载安 ...

  10. Vmware虚拟主机访问外网设置

    本手册使用10.4.7.0/24网段 重点在于虚拟主机的网关和宿主机上的Vmnet8的IP和虚拟网络编辑器的NET网关保持一致 1.设置宿主机网络适配器 选择允许Vmware网络共享 配置VMnet8 ...