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屏）
演示 智能物流柜（基础版） 智能物流柜（升级版） 前言 这是本人在大二在学校接的一个简单的实验室项目，之前发布了一个，由于那是在暑假，家里器材有限，代码敲完之后，用面包板…...
【Oracle APEX开发小技巧12】
有如下需求： 有一个问题反馈页面，要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据，方便管理员及时处理反馈。 我的方法：直接将逻辑写在SQL中，这样可以直接在页面展示 完整代码： SELECTSF.FE…...
在rocky linux 9.5上在线安装 docker
前面是指南，后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...
cf2117E
原题链接：https://codeforces.com/contest/2117/problem/E 题目背景： 给定两个数组a,b，可以执行多次以下操作：选择 i (1 < i < n - 1)，并设置 或，也可以在执行上述操作前执行一次删除任意 和 。求…...
使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装
以下是基于 vant-ui（适配 Vue2 版本 ）实现截图中照片上传预览、删除功能，并封装成可复用组件的完整代码，包含样式和逻辑实现，可直接在 Vue2 项目中使用： 1. 封装的图片上传组件 ImageUploader.vue <te…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序
一、开发环境准备 工具安装： 下载安装DevEco Studio 4.0（支持HarmonyOS 5）配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化： ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...
【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）
骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术，它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)：由层级结构的骨头组成，类似于人体骨骼蒙皮 (Mesh Skinning)：将模型网格顶点绑定到骨骼上，使骨骼移动…...
Unit 1 深度强化学习简介
Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库，例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体，比如 SnowballFight、Huggy the Do…...
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中，新增了一个本地验证码接口 /code，使用函数式路由（RouterFunction）和 Hutool 的 Circle…...
JavaScript 数据类型详解
JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型（Primitive） 和 对象类型（Object） 两大类，共 8 种（ES11）： 一、原始类型（7种） 1. undefined 定…...
NPOI Excel用OLE对象的形式插入文件附件以及插入图片
static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...