网站首页 > 开源技术 正文
近期,链环科技在进行项目开发时,有一个功能点需要用户定位实时返回终端,需要调取地图接口。而这个功能是许多项目开发会运用的。下面简单介绍一下如何利用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)进行技术咨询或案例查看。
猜你喜欢
- 2024-10-06 高德地图AMap is not defined解决
- 2024-10-06 「分享」我在阿里总结了5条高效工作经验
- 2024-10-06 Vue 前端开发——打印功能实现(vue打印console)
- 2024-10-06 教你Vue3 Compiler 优化细节,如何手写高性能渲染函数(下)
- 2024-10-06 Vue3.0权限管理实现流程【实践】(vue权限控制思路)
- 2024-10-06 手把手教你Electron + Vue实战教程(三)
- 2024-10-06 让Jenkins自动部署你的Vue项目「实践」
- 2024-10-06 Vue 前端开发——导入Excel/Csv(vue导入导出)
- 2024-10-06 1.1万字深入细品Vue3.0源码响应式系统笔记「上」
- 2024-10-06 Vue+Node+高德地图+Echart做一款出行可视化全栈webapp
你 发表评论:
欢迎- 最近发表
- 标签列表
-
- jdk (81)
- putty (66)
- rufus (78)
- 内网穿透 (89)
- okhttp (70)
- powertoys (74)
- windowsterminal (81)
- netcat (65)
- ghostscript (65)
- veracrypt (65)
- asp.netcore (70)
- wrk (67)
- aspose.words (80)
- itk (80)
- ajaxfileupload.js (66)
- sqlhelper (67)
- express.js (67)
- phpmailer (67)
- xjar (70)
- redisclient (78)
- wakeonlan (66)
- tinygo (85)
- startbbs (72)
- webftp (82)
- vsvim (79)
本文暂时没有评论,来添加一个吧(●'◡'●)