编程开源技术交流,分享技术与知识

网站首页 > 开源技术 正文

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

wxchong 2024-10-06 04:16:20 开源技术 13 ℃ 0 评论

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

实际案例

以上就是利用vue-amap调用高德地图的接口方式,具体可以进入链环科技(http://www.txxweb.com)进行技术咨询或案例查看。

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表