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