Vue接入高德地图并实现基本的路线规划功能
目录
一、申请密钥
二、安装依赖
三、代码实现
四、运行截图
五、官方文档
一、申请密钥
登录高德开放平台，点击我的应用，先添加新应用，然后再添加Key。
如图所示填写对应的信息，系统就会自动生成。
二、安装依赖
npm i @amap/amap-jsapi-loader --save三、代码实现
找到public目录下的index.html文件，把刚才申请好的2个密钥分别粘贴进去，第一个securityJsCode是填入安全密钥，第二个红框是填入Key。
完整代码：
<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title><script type="text/javascript">window._AMapSecurityConfig = {securityJsCode: '申请的安全密钥',}</script><script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=申请的Key&plugin=AMap.Driving"></script><link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /><script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script><script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --></body>
</html>
直接把下面代码完整的拷贝进去，修改一下经纬度信息就行了，可以当成一个vue组件来使用，完整代码：
<template><div><div id="container"></div><div id="panel"></div></div></template><script>export default {name: 'HomeView',data(){return{//此处不声明 map 对象，可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。//map:null,}},mounted(){//DOM初始化完成进行地图初始化this.initMap();},methods:{initMap() {//基本地图加载var map = new AMap.Map("container", {resizeEnable: true,center: [ 116.324887,40.003069],//地图中心点zoom: 13 //地图显示的缩放级别});//构造路线导航类var driving = new AMap.Driving({map: map,panel: "panel"});// 根据起终点经纬度规划驾车导航路线driving.search(new AMap.LngLat(116.303073,39.988185), new AMap.LngLat( 116.395204,39.994091), function(status, result) {// result 即是对应的驾车导航信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResultif (status === 'complete') {log.success('绘制驾车路线完成')} else {log.error('获取驾车数据失败：' + result)}});}},
}
</script>
<style scoped>
#container{padding:0px;margin: 0px;width: 100%;height: 800px;
}
#panel {position: fixed;background-color: white;max-height: 90%;overflow-y: auto;top: 10px;right: 10px;width: 280px;
}
#panel .amap-call {background-color: #009cf9;border-top-left-radius: 4px;border-top-right-radius: 4px;
}
#panel .amap-lib-driving {border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;overflow: hidden;
}
</style>四、运行截图
直接运行项目，效果如下：
大功告成！
五、官方文档
还有很多其他的功能，可以自行查看官方文档：https://lbs.amap.com/api/javascript-api/guide/abc/prepare
相关文章：
Vue接入高德地图并实现基本的路线规划功能
目录 一、申请密钥 二、安装依赖 三、代码实现 四、运行截图 五、官方文档 一、申请密钥 登录高德开放平台，点击我的应用，先添加新应用，然后再添加Key。 如图所示填写对应的信息，系统就会自动生成。 二、安装依赖 npm i am…...
linux网络编程4
24.9.20学习目录 一.UDP（续）1.广播广播流程 2.多播多播流程 一.UDP（续） 1.广播 由一台主机向该主机所在子网内的所有主机发送数据的方式； 广播只能用UDP或原始IP实现，不能使用TCP； 其作用是将…...
Spring模块详解Ⅳ（Spring ORM和Spring Transaction）
目录 Spring ORM（Object-Relational Mapping）作用核心组件使用步骤事务管理代码演示优点挑战总结 Spring Transaction（Spring事务管理）事务的基本概念Spring事务管理的类型声明式事务管理事务的传播行为（Propagation&a…...
深度图可视化显示(kitti)
文章目录 前言一、读取深度值与图像1、深度值读取2、图像读取 二、深度图可视化1、深度图可视化代码2、深度图可视化结果展示 三、深度图在图像上可视化1、可视化代码2、可视化坐标显示 四、完整代码 前言 kitti数据是一个通用数据，有关kitti的深度图像内容我已有博…...
【Kubernetes知识点】HPA如何控制不同的资源实现自动扩缩容？
【Kubernetes知识点】HPA如何控制不同的资源实现自动扩缩容？ 目录 1 概念 1.1 什么是HPA1.2 Deployment 与 HPA 的关系 1.2.1 工作原理 1.3 StatefulSet 与 HPA 的关系 1.3.1 工作原理 2 实验案例：HPA 控制 StatefulSet 进行扩缩容 2.1 部署一个有状态…...
adb devices不显示连接设备怎么解决
adb devices不显示设备，首先用老办法检查。假如是显示adb这个命令不认识，那就是系统路径问题。假如能认识adb这个命令，那就检查一下手机有没有开usb调试。 但是我遇到了更奇怪的问题：我把网上的攻略都试了一遍，设备驱…...
经典sql题（一）求连续登录不少于三天用户
示例数据 假设我们的 test 表有以下数据： iddate12023-10-01 08:00:0012023-10-01 09:00:0012023-10-02 10:00:0012023-10-03 11:00:0022023-10-01 10:00:0022023-10-02 12:00:0022023-10-03 14:00:0022023-10-04 15:00:0032023-10-01 16:00:00 第一步࿱…...
2024java面试-软实力篇
为什么说简历很重要？ 一份好的简历可以在整个申请面试以及面试过程中起到非常好的作用。 在不夸大自己能力的情 况 下，写出一份好的简历也是一项很棒的能力。为什么说简历很重要呢？ 、 先从面试来说 假如你是网申，你的简历必然…...
「OC」present和push操作区别以及混合推出的实现
「OC」present和push操作区别以及混合推出的实现 文章目录 「OC」present和push操作区别以及混合推出的实现前言present用途while循环越级返回通知越级返回添加present动画 push模态视图和push视图混合跳转操作一：控制器Apresent控制器B，控制器B再将控制…...
【高分系列卫星简介】
高分系列卫星是中国国家高分辨率对地观测系统（简称“高分工程”）的重要组成部分，旨在提供全球范围内的高分辨率遥感数据，广泛应用于环境监测、灾害应急、城市规划、农业估产等多个领域。以下是对高分系列卫星及其数据、相关参数和…...
八股文-多线程、并发
八股文-多线程、并发 最近学到了一种方法，可以用于简历项目经验编写以及面试题目的回答 STAR法则：在什么背景下，你需要解决什么问题，你做了啥，得到了什么结果 情境（Situation）： 描…...
xtu oj 折纸
折纸# 题目描述# 一个长为a,宽为b矩形的纸，我们沿b边(左边)的中点与右上顶点的边折叠，求左上顶点在折叠以后离下边的距离？ 输入# 第一行是一个整数T(1≤T≤10000),表示样例的个数。 以后每行一个样例，为两个整数1≤a,b≤1000。…...
传知代码-多示例AI模型实现病理图像分类
代码以及视频讲解 本文所涉及所有资源均在传知代码平台可获取 概述 本文将基于多示例深度学习EPLA模型实现对乳腺癌数据集BreaKHis_v1的分类。EPLA模型是处理组织病理学图像的经典之作。EPLA模型是基于多示例学习来进行了，那么多示例学习模型对处理病理学图像具有…...
Java知识点小结3：内存回收
文章目录 对象引用强引用软引用（SoftReference）弱引用（WeakReference）考一考 虚引用（PhantomReference）总结 垃圾回收新生代老年代永生代 内存管理小技巧尽量使用直接量使用StringBuilder和StringBuffer进行…...
LeetCode746：使用花费最小爬楼梯
题目链接：746. 使用最小花费爬楼梯 - 力扣（LeetCode） 代码如下 class Solution { public:int minCostClimbingStairs(vector<int>& cost) {int m cost.size();if(m 1) return min(cost[1], cost[0]);if(m 0) return cost[0]…...
列表、数组排序总结：Collections.sort()、list.sort()、list.stream().sorted()、Arrays.sort()
列表类型 一.Collections.sort() Collections.sort()用于List类型的排序，其提供了两个重载方法： 1.sort(List<T> list) （1）List指定泛型时只能指定引用数据类型，也就是说无法用于基本数据类型的排序。 &am…...
【资料分析】刷题日记3
第一套 √ 考点：基期比重差很温柔的题 普通专科女生 占比 52.5% - 1.7% 50.8% 成人本专科女生 占比 57.8% - 4.6% 53.2% 相比降低了2.4% 知比重和部分量，求整体在花生老师的解法中体会啥叫适当约分 0.1899 / 47.8% / 87.5% 》0.19 / （4…...
基于SpringBoot+Vue的商场停车场管理系统
作者：计算机学姐 开发技术：SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等，“文末源码”。 专栏推荐：前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 【2025最新】基于JavaSpringBootVueMySQL的…...
4. 密码协议
4. 密码协议 (1) 协议的基本概念 协议是一种在两个或多个参与者之间进行通信的规范，它定义了参与者之间的交互方式、消息格式和通信过程。协议的目的是确保通信的可靠性和安全性，防止信息被篡改、伪造或泄露。 (2) 密码协议分类及基本密码协议 密码协议是用于加密和解密数…...
基于嵌入式的智能物流柜（ 触摸屏/0.96寸oled屏）
演示 智能物流柜（基础版） 智能物流柜（升级版） 前言 这是本人在大二在学校接的一个简单的实验室项目，之前发布了一个，由于那是在暑假，家里器材有限，代码敲完之后，用面包板…...
遍历 Map 类型集合的方法汇总
1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...
CMake 从 GitHub 下载第三方库并使用
有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...
均衡后的SNRSINR
本文主要摘自参考文献中的前两篇，相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程，其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt 根发送天线， n r n_r nr 根接收天线的 MIMO 系…...
Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析
Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问（基础概念问题） 1. 请解释Spring框架的核心容器是什么？它在Spring中起到什么作用？ Spring框架的核心容器是IoC容器&#…...
短视频矩阵系统文案创作功能开发实践，定制化开发
在短视频行业迅猛发展的当下，企业和个人创作者为了扩大影响力、提升传播效果，纷纷采用短视频矩阵运营策略，同时管理多个平台、多个账号的内容发布。然而，频繁的文案创作需求让运营者疲于应对，如何高效产出高质量文案成…...
视觉slam十四讲实践部分记录——ch2、ch3
ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...
Go 语言并发编程基础：无缓冲与有缓冲通道
在上一章节中，我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道，它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好࿰…...
基于Springboot+Vue的办公管理系统
角色： 管理员、员工 技术： 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能： 该办公管理系统是一个综合性的企业内部管理平台，旨在提升企业运营效率和员工管理水…...
RushDB开源程序 是现代应用程序和 AI 的即时数据库。建立在 Neo4j 之上
一、软件介绍 文末提供程序和源码下载 RushDB 改变了您处理图形数据的方式 — 不需要 Schema，不需要复杂的查询，只需推送数据即可。 二、Key Features ✨ 主要特点 Instant Setup: Be productive in seconds, not days 即时设置 ：在几秒钟…...
C++11 constexpr和字面类型：从入门到精通
文章目录 引言一、constexpr的基本概念与使用1.1 constexpr的定义与作用1.2 constexpr变量1.3 constexpr函数1.4 constexpr在类构造函数中的应用1.5 constexpr的优势 二、字面类型的基本概念与使用2.1 字面类型的定义与作用2.2 字面类型的应用场景2.2.1 常量定义2.2.2 模板参数…...