如何在Vue脚手架中简单集成使用高德地图?一篇文章教你搞定

简介: 如何在Vue脚手架中简单集成使用高德地图

1:高德控制台

cd89e9d7bd794ffd9586ecf0defbf200.png

2:创建新应用

6bdb47b0afef4506a5efd0d8d8c96c6f.png

3:点击新建

7ca2c55547434142b35f4970b77fa467.png

4:添加key

b356565264ac406d8d77103da7002082.png

5:选择web (JSAPI)

75452e8cc18748dea173ccf5ca391a1a.png

6:提交

dbcf10ffcf92443fa892c7d0efbf2816.png

开发文档手册

快速上手-地图 JS API 2.0 | 高德地图API

1:在HTML 文件中引入这段js

981f59fbcba44586b10ed59a0396cc56.png

2: 创建地图实例

  mounted() {
    // 创建地图实例
    var map = new AMap.Map('container', {
      zoom: 12,
      resizeEnable: true
    })
    var marker = new AMap.Marker({
      position: new AMap.LngLat(116.29537571881102, 39.842559532456974), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
      title: '北京丰台医院' })
  },

3:效果图

33d18ca2203747ccb2c7e984d3d8d81b.png

目录
相关文章
|
2月前
|
JavaScript 数据可视化
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
这篇文章介绍了如何使用vue-cli 2和3版本来创建Vue项目,并详细说明了两者之间的主要区别。
129 5
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
|
2月前
|
JavaScript
Vue CLi脚手架创建第一个VUE项目
Vue CLi脚手架创建第一个VUE项目
42 3
|
2天前
|
安全 定位技术 API
婚恋交友系统匹配功能 婚恋相亲软件实现定位 语音社交app红娘系统集成高德地图SDK
在婚恋交友系统中集成高德地图,可实现用户定位、导航及基于地理位置的匹配推荐等功能。具体步骤如下: 1. **注册账号**:访问高德开放平台,注册并创建应用。 2. **获取API Key**:记录API Key以备开发使用。 3. **集成SDK**:根据开发平台下载并集成高德地图SDK。 4. **配置功能**:实现定位、导航及基于位置的匹配推荐。 5. **注意事项**:保护用户隐私,确保API Key安全,定期更新地图数据,添加错误处理机制。 6. **测试优化**:完成集成后进行全面测试,并根据反馈优化功能。 通过以上步骤,提升用户体验,提供更便捷的服务。
|
1月前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
|
1月前
|
缓存 资源调度 JavaScript
Vue集成Excalidraw实现在线画板功能
Excalidraw是一款开源在线绘图工具,适用于白板、思维导图、原型设计等场景。支持手绘风格、多种图形元素、导出功能及多人协作,深受开发者喜爱。本文档介绍了如何在Vue项目中集成Excalidraw,包括安装依赖、配置文件修改、页面添加等步骤,帮助开发者快速上手。
142 0
Vue集成Excalidraw实现在线画板功能
|
2月前
|
缓存 JavaScript 前端开发
《基础篇第4章:vue2基础》:使用vue脚手架创建项目
《基础篇第4章:vue2基础》:使用vue脚手架创建项目
82 3
|
2月前
|
JavaScript
【小白懂系列】Vue CLi脚手架创建第一个VUE项目
【小白懂系列】Vue CLi脚手架创建第一个VUE项目
49 2
|
3月前
|
JavaScript
Vue Cli 脚手架安装
本文介绍了如何使用npm和cnpm淘宝镜像加速来安装Vue CLI脚手架工具,并验证安装成功。接着,通过Vue CLI创建新项目,并启动项目服务。
Vue Cli 脚手架安装
|
2月前
|
JSON 缓存 JavaScript
vue尚品汇商城项目-day01【1.vue-cli脚手架初始化项目生成文件的介绍】
vue尚品汇商城项目-day01【1.vue-cli脚手架初始化项目生成文件的介绍】
34 0
|
2月前
|
JavaScript
vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
36 0

热门文章

最新文章