amap vueamap 与_vue调用高德地图：vue-amap

前言：之前没有接触过页面调用地图的项目，某次面试，老板要求我用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

main.js引入vue-amap

// 引入vue-a