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

首先,调用vue调用高德地图分三步:
1.去高德开发者平台申请key
2.安装vue-amap;
3.使用组件调用地图。

简单介绍一下具=具体操作步骤和调用代码:

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

「链环科技」如何利用vue-amap调用高德地图接口
选择你的开发者身份,这里演示个人开发者获取key方法。

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

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

「链环科技」如何利用vue-amap调用高德地图接口
提交之后,就会看到自己的key。

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

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

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

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

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

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

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

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

●引入SDK
引入有两种方式,一种是页面直接引入
「链环科技」如何利用vue-amap调用高德地图接口

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

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

4.组件调用高德地图

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

实际案例

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

相关文章:

  • 2021-12-16
  • 2022-02-08
  • 2021-06-06
  • 2022-12-23
  • 2023-03-27
  • 2021-10-03
  • 2021-10-03
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-01-04
  • 2022-01-02
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案