Vue-amap的使用
(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的使用的更多相关文章
- vue的地图插件amap
https://www.jianshu.com/p/0011996b81e2(amap) npm install vue-amap --save
- 在vue中使用高德地图开发,以及AMap的引入?
百度引入BMap ,一个import 即可,可AMap 却报AMap is not difined ? 1.首先在 externals: { "BMap": "BMap& ...
- vue 调用高德地图
一. vue-amap,一个基于 Vue 2.x 和高德地图的地图组件 https://elemefe.github.io/vue-amap/#/ 这个就不细说了,按照其文档,就能够安装下来. 二. ...
- vue 高德地图之玩转周边
前言:在之前的博客中,有成功引入高德地图,这是以前的地址 vue 调用高德地图. 因为一些需求,需要使用到地图的周边功能. 完整的项目代码请查看 我的github 一 .先看要实现的结果,参考了链 ...
- vue 首页问题
(现在其实处于不知道自己不知道状态,前端其实很多东东,不信弄个微博试试,还有那些概念的to thi tha) 1.压缩 一般 vue-cli已经压缩了 比如js 的,一般4M多压缩到 1M,还有css ...
- vue加载优化策略
vue.js是一个比较流行的前端框架,与react.js.angular.js相比来说,vue.js入手曲线更加流畅,不管掌握多少都可以快速上手.但是单页面应用也都有其弊病,有时候首屏加载慢的让人捏舌 ...
- VUE 高德地图选取地址组件开发
高德地图文档地址 http://lbs.amap.com/api/lightmap/guide/picker/ 结合步骤: 1.通过iframe内嵌引入高德地图组件 key就选你自己申请的key &l ...
- vue 使用高德地图vue-amap组件
首先 npm install -S vue-amap 然后在 main.js import VueAMap from 'vue-amap'; //注意不要和 AMap原始名称覆盖 Vue.use ...
- vue仿微信网页版|vue+web端聊天室|仿微信客户端vue版
一.项目介绍 基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室— ...
- vue项目eslint配置 以及 解释
// https://eslint.org/docs/user-guide/configuring module.exports = { root: true, parserOptions: { pa ...
随机推荐
- HashTable集合和练习题_计算一个字符串中每一个字符出现的次数
HashTable集合 /** * java.util.Hashtable<K,V>集合 implement Map<K,V>接口 * Hashtable:底层也是一个哈希表, ...
- 我又造了个轮子:GrpcGateway
我个人对GRPC是比较感兴趣的,最近在玩通过前端调用GRPC.通过前端调用GRPC业界有两种方式:GRPC Web和GRPC JSON转码. GRPC Web 通过JS或者Blazor WASM调用G ...
- Vue3:不常用的Composition API && Fragment、Teleport、Suspense && 与Vue2对比的一些变化
1 # 一.Vue3不常用的Composition API 2 # 1.shallowReactive与shallowRef 3 .shallowReactive: 只处理对象最外层属性的响应式(浅响 ...
- Nginx 配置静态资源防盗链
# 什么是静态资源盗链: # 你服务器上的一张图片,127.0.0.1/images/a.png # 别人的html页面可以直接通过<img src="127.0.0.1/images ...
- 关于奉加微PHY62xx系列如何选型?PHY6222/PHY6212/PHY6252
PHY6252是一款支持BLE 5.2功能的系统级芯片(SOC),集成了低功耗的高性能多模射频收发机,搭载32位高性能低功耗处理器,提供64K retention SRAM.可选512/256K Fl ...
- java-注释、API之字符串(String)
/** * 文档注释只定义在三个地方 : 类.常量.方法上 * 在类上定义文档注释用来说这个类设计及其解决问题等相关描述信息 * @author 作者 * @version 1.0 21/08/17 ...
- Java精进-手写持久层框架
前言 本文适合有一定java基础的同学,通过自定义持久层框架,可以更加清楚常用的mybatis等开源框架的原理. JDBC操作回顾及问题分析 学习java的同学一定避免不了接触过jdbc,让我们来回顾 ...
- Mybatis 插件使用及源码分析
Mybatis 插件 Mybatis插件主要是通过JDK动态代理实现的,插件可以针对接口中的方法进行代理增强,在Mybatis中比较重要的接口如下: Executor :sql执行器,包含多个实现类, ...
- React报错之React Hook 'useEffect' is called in function
正文从这开始~ 总览 为了解决错误"React Hook 'useEffect' is called in function that is neither a React function ...
- Vue3中插槽(slot)用法汇总
Vue中的插槽相信使用过Vue的小伙伴或多或少的都用过,但是你是否了解它全部用法呢?本篇文章就为大家带来Vue3中插槽的全部用法来帮助大家查漏补缺. 什么是插槽 简单来说就是子组件中的提供给父组件使用 ...