（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. Linux串口编程进阶

    在<Linux串口编程>编程一文中介绍了串口应用中常用的基本操作,如:串口打开关闭.串口设置.数据收发等.本篇文章主要基于常规串口操作进行了扩充,主要介绍如下操作: Linux系统使用非标 ...

  2. DTS搭载全新自研内核，突破两地三中心架构的关键技术｜腾讯云数据库

    随着企业规模的扩大,对数据库可用性要求越来越高,更多企业采用两地三中心.异地多活的架构,以提高数据库的异常事件应对能力. 在数据库领域,我们常听的"两地三中心"."异地多 ...

  3. rust里的内存对齐

    内存对齐主要遵循下面三个原则: 结构体变量的起始地址能够被其最宽的成员大小整除 结构体每个成员相对于起始地址的偏移能够被其自身大小整除,如果不能则在前一个成员后面补充字节 结构体总体大小能够被最宽的成 ...

  4. 通过类名引用静态成员方法和通过super引用父类的成员方法

    package com.yang.Test.StaticMethodReference; /** * 通过类型引用静态成员方法 * 类已经存在,静态成员方法也已经存在 * 就可以通过类名直接引用静态成 ...

  5. 《Python编程：从入门到实践》第19章笔记：用户/用户注册/身份验证

    接上篇django最基本的一些日常用法,这是第19章笔记,希望在做"动手试一试"的时候可以让自己方便参考. 这一章实现了两个功能: 1.让用户能够添加主题Topic和条目Entry ...

  6. 基于WPF重复造轮子，写一款数据库文档管理工具（一）

    项目背景 公司业务历史悠久且复杂,数据库的表更是多而繁杂,每次基于老业务做功能开发都需要去翻以前的表和业务代码.需要理解旧的表的用途以及包含的字段的含义,表少还好说,但是表一多这就很浪费时间,而且留下 ...

  7. 轻盈潇洒卓然不群，敏捷编辑器Sublime text 4中文配置Python3开发运行代码环境(Win11+M1 mac)

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_210 20世纪初,几乎所有的飞机都是并列双翼结构,此时,美国著名飞行大亨霍华德·休斯认为自己的飞机不够快,助手委婉地提醒他,如果速 ...

  8. Taurus.MVC 微服务框架 入门开发教程：项目集成：2、客户端：ASP.NET Core（C#）项目集成：应用中心。

    系列目录: 本系列分为项目集成.项目部署.架构演进三个方向,后续会根据情况调整文章目录. 本系列第一篇:Taurus.MVC V3.0.3 微服务开源框架发布:让.NET 架构在大并发的演进过程更简单 ...

  9. 在 Linux 安装 Java 的流程

    前言 安装流程一共为 4 个步骤,分为下载.解压.配置.检查. 下载 Oracle 官网下载 JDK. 解压 上传至 Linux 中(可使用宝塔面板上传),解压安装包: ubuntu@VM-0-6-u ...

  10. k8s命令补全方法

    正常安装了k8s后,使用kubect 工具后接的命令不能直接tab补全 命令补全方法: yum -y install bash-completionsource /usr/share/bash-com ...