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屏）
演示 智能物流柜（基础版） 智能物流柜（升级版） 前言 这是本人在大二在学校接的一个简单的实验室项目，之前发布了一个，由于那是在暑假，家里器材有限，代码敲完之后，用面包板…...
Linux应用开发之网络套接字编程(实例篇)
服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...
基于ASP.NET+ SQL Server实现（Web）医院信息管理系统
医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上，开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识，在 vs 2017 平台上，进行 ASP.NET 应用程序和简易网站的开发；初步熟悉开发一…...
Objective-C常用命名规范总结
【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名（Class Name)2.协议名（Protocol Name)3.方法名（Method Name)4.属性名（Property Name）5.局部变量/实例变量（Local / Instance Variables&…...
条件运算符
C中的三目运算符（也称条件运算符，英文：ternary operator）是一种简洁的条件选择语句，语法如下： 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true，则整个表达式的结果为“表达式1”…...
cf2117E
原题链接：https://codeforces.com/contest/2117/problem/E 题目背景： 给定两个数组a,b，可以执行多次以下操作：选择 i (1 < i < n - 1)，并设置 或，也可以在执行上述操作前执行一次删除任意 和 。求…...
SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现
摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序，以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务，提供稳定高效的数据处理与业务逻辑支持；利用 uniapp 实现跨平台前…...
【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验
系列回顾： 在上一篇中，我们成功地为应用集成了数据库，并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了！但是，如果你仔细审视那些 API，会发现它们还很“粗糙”：有…...
在Ubuntu24上采用Wine打开SourceInsight
1. 安装wine sudo apt install wine 2. 安装32位库支持，SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库（解决显示问题） sudo apt install fonts-wqy…...
C#中的CLR属性、依赖属性与附加属性
CLR属性的主要特征 封装性： 隐藏字段的实现细节 提供对字段的受控访问 访问控制： 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性： 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑： 可以…...
RabbitMQ入门4.1.0版本（基于java、SpringBoot操作）
RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发，后来由Pivotal Software Inc.（现为VMware子公司）接管。RabbitMQ 是一个开源的消息代理和队列服务器，用 Erlang 语言编写。广泛应用于各种分布…...