「链环科技」如何利用vue-amap调用高德地图接口

近期，链环科技在进行项目开发时，有一个功能点需要用户定位实时返回终端，需要调取地图接口。而这个功能是许多项目开发会运用的。下面简单介绍一下如何利用Vue-amap调用地图接口。

首先，调用vue调用高德地图分三步：
1.去高德开发者平台申请key
2.安装vue-amap；
3.使用组件调用地图。
简单介绍一下具=具体操作步骤和调用代码：

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

选择你的开发者身份，这里演示个人开发者获取key方法。

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

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

提交之后，就会看到自己的key。

2.vue-amap，一个基于 Vue 2.x 和高德地图的地图组件

npm安装

CDN

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

main.js引入vue-amap

3.按照官方提供的方法引入

●修改webpac.base.conf.js文件

●引入SDK
引入有两种方式，一种是页面直接引入

不管是采用哪种方式，都要保证你想要加载地图的js文件，在引入的sdk之后

4.组件调用高德地图

实际案例