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屏）
演示 智能物流柜（基础版） 智能物流柜（升级版） 前言 这是本人在大二在学校接的一个简单的实验室项目，之前发布了一个，由于那是在暑假，家里器材有限，代码敲完之后，用面包板…...
网络编程（Modbus进阶）
思维导图 Modbus RTU（先学一点理论） 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议，由 Modicon 公司（现施耐德电气）于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...
浅谈 React Hooks
React Hooks 是 React 16.8 引入的一组 API，用于在函数组件中使用 state 和其他 React 特性（例如生命周期方法、context 等）。Hooks 通过简洁的函数接口，解决了状态与 UI 的高度解耦，通过函数式编程范式实现更灵活 Rea…...
Spring Boot 实现流式响应（兼容 2.7.x）
在实际开发中，我们可能会遇到一些流式数据处理的场景，比如接收来自上游接口的 Server-Sent Events（SSE） 或 流式 JSON 内容，并将其原样中转给前端页面或客户端。这种情况下，传统的 RestTemplate 缓存机制会…...
渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止
<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet： https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...
2.Vue编写一个app
1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...
Java多线程实现之Callable接口深度解析
Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序
一、开发环境准备 工具安装： 下载安装DevEco Studio 4.0（支持HarmonyOS 5）配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化： ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...
.Net Framework 4/C# 关键字（非常用，持续更新...）
一、is 关键字 is 关键字用于检查对象是否于给定类型兼容，如果兼容将返回 true，如果不兼容则返回 false，在进行类型转换前，可以先使用 is 关键字判断对象是否与指定类型兼容，如果兼容才进行转换，这样的转换是安全的。 例如有：首先创建一个字符串对象，然后将字符串对象隐…...
在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案
这个问题我看其他博主也写了，要么要会员、要么写的乱七八糟。这里我整理一下，把问题说清楚并且给出代码，拿去用就行，照着葫芦画瓢。 问题 在继承QWebEngineView后，重写mousePressEvent或event函数无法捕获鼠标按下事…...
搭建DNS域名解析服务器(正向解析资源文件)
正向解析资源文件 1）准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2）服务端安装软件：bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...