前言:之前没有接触过页面调用地图的项目,某次面试,老板要求我用vue-amap调用高德地图,回家以后,我去网上查了一些案例和教程,看似很简单的引入调用,我却整整弄了一宿,还没弄出来!!!百般无奈之下,我选择第二天重头来过,一定要找到什么原因...

结果!血的教训告诉我,记录教程的时候,一定要有实践基础,切不可敷衍了事,不然别人看你的文章只是在浪费时间。

——————————

vue调用高德地图拢共分三步:

1.去高德开发者平台申请key;
2.安装vue-amap;
3.使用组件调用地图

1.注册高德开发者账号,申请KEY

  • 注册完成->找到控制台(右上角)->你会看到下图:
 
image.png
  • 选择你的开发者身份,这里演示个人开发者获取key方法。

  • 按提示走完注册流程即可。

  • 注册完再打开控制台->应用管理->找到“+添加新KEY”->点击会跳出这个弹框:

 
image.png
  • 提交之后,你会看到自己的key。

2.vue安装vue-amap

npm安装

npm install vue-amap --save

CDN

目前可通过 unpkg.com/vue-amap 获取最新版本的资源。

<script src="https://unpkg.com/vue-amap/dist/index.js"></script>

main.js引入vue-amap

// 引入vue-amap
import AMap from 'vue-amap';
Vue.use(AMap); // 初始化vue-amap
AMap.initAMapApiLoader({
// 高德的key
key: 'YOUR_KEY',
// 插件集合 (插件按需引入)
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor']
});

3.组件里调用高德地图

需要注意:<el-amap>一定要设置宽高,不然地图不会显示。或者给外面套一个div,给div设置宽高也行。

 
image.png
  • 最简单最基本的地图就完成了,如图:
 
image.png

amap里还有很多属性,可以根据自己所需使用(很简单,直接复制粘贴修改一下就好了),这里不一一作介绍,附上网址可自行查看:
vue-amap官网:https://elemefe.github.io/vue-amap/#/
高德开放平台:http://lbs.amap.com/

.

vue调用高德地图:vue-amap的更多相关文章

  1. vue 调用高德地图

    一. vue-amap,一个基于 Vue 2.x 和高德地图的地图组件 https://elemefe.github.io/vue-amap/#/ 这个就不细说了,按照其文档,就能够安装下来. 二. ...

  2. vue集成高德地图

    vue集成高德地图 前言 二.使用步骤 1.注册高德开发平台 2.vue 结尾 前言 之前玩Thymeleaf的时候玩过高德地图,现在无聊Vue项目也整个地图进去~ 二.使用步骤 1.注册高德开发平台 ...

  3. Android 编程 AMapLocationClientOption 类中的 setNeedAddress 方法用处 (高德地图 com.amap.api.location.AMapLocationClientOption 中的类)

    最近在用高德地图来写Android App, 其中有一些 方法是不太理解的,这里写一下 对  高德地图  com.amap.api.location.AMapLocationClientOption ...

  4. 前端vue使用高德地图

    首先,注册Key 1.注册开发者账号,成为高德开放平台开发者 2.登陆之后,在进入「应用管理」 页面「创建新应用」 3.为应用添加 Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」 ...

  5. Angular/Vue调用百度地图+标注点不显示图标+多标注点计算地图中心位置

    整理一下~ 一.在vue中调用百度地图 首先当然是申请百度密匙(很简单,不多说) 1.在index.html文件中引入百度地图JavaScript API接口:   <script type=& ...

  6. java调用高德地图api实现通过ip定位访问者的城市

    所需东西:高德地图的key 注意:这个key是 web服务的key  和js的key不是一个key(若没有则自行创建,创建教程在文末) 高德地图的api文档:https://lbs.amap.com/ ...

  7. 关于Android studio调用高德地图的简单流程和要点

    一,账号与Key的申请 注册成为高德开发者需要分三步: 第一步,注册高德开发者:第二步,去控制台创建应用:第三步,获取Key. 前2步都比较简单,这里说下第三步. 获取Key 1.进入控制台,创建一个 ...

  8. Android 编程 AMapLocationClientOption 类中的 setMockEnable (高德地图 com.amap.api.location.AMapLocationClientOption 中的类)

    setMockEnable 高德地图中 AMapLocationClientOption 中有一个方法是设置APP是否接受模拟定位的设置,就是方法 setMockEnable //设置是否允许模拟位置 ...

  9. 如何在vue里面调用高德地图

    1.修改webpac.base.conf.js文件 与module同一级添加 externals: { 'AMap': 'AMap', 'AMapUI': 'AMapUI' }配置. 然后在index ...

随机推荐

  1. 远程访问阿里云服务器jupyter

    官网链接 一.pip安装jupyter安装Anaconda的话,会自动按照jupyter,就不需要再使用pip安装了 pip3 install jupyter 二.生成jupyter notebook ...

  2. Python—导入自定义的模块和包(指定路径下的模块和包)

    模块路径如下图: import sys sys.path.append(r"E:\project\path") print "===>", sys.arg ...

  3. IDEA 第三方jar包 使用

    1,加入lib包中,在pom中添加 <dependency> <groupId>com.sss</groupId> <artifactId>包名< ...

  4. UVA 1473 Dome of Circus

    https://cn.vjudge.net/problem/UVA-1473 题目 给出一些点,问包含这些点的最小圆锥(要求顶点在y轴,底面圆心在原点)的体积 题解 因为圆锥对称,所以可以把所有点旋转 ...

  5. matlab中的colormap

    matlab colormaps 默认颜色图是 parula ,颜色图从左往右数值不断增大. 颜色图名称 色阶 parula jet hsv hot cool spring summer autumn ...

  6. Vue之外的杂谈笔记

    1.老项目的构建输出为什么臃肿? 引用:(引自http://www.cnblogs.com/linfangshuhellowored/p/5657285.html) 答:因为使用的是require的r ...

  7. python-12-字典的嵌套与int快速排序

    前言 字典的增删改查我们都有一定的认识与了解啦,但是字典也可以嵌套列表.字典.元组等数据结构. 一.字典的嵌套 1.修改.添加 dic = { "name": ["lin ...

  8. IT兄弟连 Java语法教程 数据类型转换

    类型转换是将一个值从一种类型更改为另一种类型的过程.例如,可以将String(字符串,字符串是Java中非常特殊的数据类型,字符串属于引用类型,但是可以像基本类型一样使用字面值赋值)类型数据“456” ...

  9. SpringBoot系列之配置文件加载位置

    SpringBoot系列之配置文件加载位置 SpringBoot启动会自动扫描如下位置的application.properties或者application.yml文件作为Springboot的默认 ...

  10. Protractor - 怎样运行

    前一篇设置好了Protractor基本运行环境,那怎样运行Protractor呢? 要运行我们的测试脚本,至少需要配置好两个文件: ---Package.json ---conf.js Package ...