高德地图之获取经纬度并且根据获取经纬度渲染到路线规划

话不多说,直接给兄弟们上干货,修改了好多次,之前都是获取到路线但是无法删除,这次是根据点击的单双判断开始和结束

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><title>位置经纬度 + 驾车规划路线</title><script src="./js/jquery-3.7.1.js"></script><style type="text/css">html,body,#container {width: 100%;height: 100%;}#container {width: 80%;margin-left: 10%;height: 600px;}#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;}#qd {width: 150px;height: 40px;position: fixed;top: 260px;background-color: gray;color: white;font-size: 10px;}#zd {width: 150px;height: 40px;position: fixed;top: 300px;background-color: gray;color: white;font-size: 10px;}</style><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><script type="text/javascript">window._AMapSecurityConfig = {securityJsCode: "13f25737b187aa80ea65cdc53509e34d",};</script><body><div id="container"></div><div id="panel"></div><div id="qd"></div><div id="zd"></div><script type="text/javascript"src="https://webapi.amap.com/maps?v=2.0&key=effbe0fe2503f592b2652c1874584243&plugin=AMap.Driving"></script><script type="text/javascript">//基本地图加载var map = new AMap.Map("container", {resizeEnable: true,zoom: 13 //地图显示的缩放级别});//构造路线导航类var driving = new AMap.Driving({map: map,panel: "panel"});var jd;var wd;var num = 0;map.on('click', function(e) {num++;console.log(e.lnglat.getLng(), e.lnglat.getLat());if (num % 2 == 1) {jd = new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat());$('#qd').html('');$('#qd').html(function(index, oldHtml) {return oldHtml + '起经:' + e.lnglat.getLng() + '&nbsp&nbsp&nbsp' + '起纬:' + e.lnglat.getLat();});} else if (num % 2 == 0) {wd = new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat());$('#zd').html('');$('#zd').html(function(index, oldHtml) {return oldHtml + '起经:' + e.lnglat.getLng() + '&nbsp&nbsp&nbsp' + '起纬:' + e.lnglat.getLat();});}// 根据起终点经纬度规划驾车导航路线driving.search(jd, wd),function(status, result) {if (status === 'complete') {log.success('绘制驾车路线完成')map.setCenter([jd, wd])} else {log.error('获取驾车数据失败:' + result)}};});</script></body>
</html>

兄弟们点下赞,搞了好长时间,碰到了好多壁,希望大家关注下

我是小辉,请大家多多关照

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/842637.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

解读 MySQL 容器信息:`docker inspect` 字段详解

前言 在使用 Docker 时&#xff0c;docker inspect 命令是一个非常有用的工具&#xff0c;它能够返回容器或镜像的详细配置信息和状态。以下是对 docker inspect mysql 命令输出的字段的详细解释&#xff0c;这些信息可以帮助您更好地了解容器的内部工作机制。 容器基础信息 …

回顾Java中的算术运算符、关系运算符和逻辑运算符,并解释下和的区别

一、在Java中&#xff0c;存在多种类型的运算符&#xff0c;包括算术运算符、关系运算符和逻辑运算符。以下是这些运算符的列表和简要说明&#xff1a; 算术运算符 加法运算符 (): 用于将两个操作数相加。减法运算符 (-): 用于从一个操作数中减去另一个操作数。乘法运算符 (*…

【前端】CSS弹性布局 display-flex

一、display-flex弹性布局 Flex&#xff0c;用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 在父DIV中使用 display: -webkit-flex; /*在webkit内核的浏览器上使用要加前缀*/ display: flex; //将对象作为弹性伸缩盒显示// 沿水平主轴让元素从左向右排…

git中忽略文件的配置

git中忽略文件的配置 一、在项目根目录下创建.gitignore文件二、配置规则如果在配置之前已经提交过文件了&#xff0c;要删除提交过的&#xff0c;如何修改&#xff0c;参考下面的 一、在项目根目录下创建.gitignore文件 .DS_Store node_modules/ /dist# local env files .env…

找一个区间内两个数最大公约数的最大值(24年gdcpc省赛G题)

题目大意就是t组数据,每组一个左右边界l,r,问区间内的两个是xi,yi是区间内max(gcd(xi,yi)),数据范围是1e12. 答案就是找到第一个a*x<b*x(a<b),他们两在l到r之间且x最大,那么x就是答案,可以知道,要使两个数在区间内,那么他们之间的差值要小于min(R-L,[R/2]),[]表示向下取…

【安装】VMware虚拟机安装windows操作系统,VM的相关操作

目录 引出报错&#xff1a;press any key to boot form cd激活调整显示 在VMware上新建虚拟机&#xff0c;并安装Windows1、新建虚拟机2、装载 ISO 镜像3、安装Windows server 20164、开机初始化 虚拟机操作1、虚拟机基本操作2、虚拟机快照3、虚拟机克隆4、VMware Tools 总结 引…

消费增值:国家支持的消费新零售模型

在当下的消费时代&#xff0c;一个全新的概念——消费增值&#xff0c;正逐渐走进大众视野。它不仅仅是一种消费模式&#xff0c;更是一种全新的财富增长途径。那么&#xff0c;消费增值究竟是什么&#xff1f; 首先&#xff0c;消费增值的本质在于将消费行为与投资行为相结合…

大模型日报2024-05-27

大模型日报 2024-05-27 大模型资讯 芝加哥大学研究AI在金融分析中的应用 摘要: 芝加哥大学的研究探索了大型语言模型&#xff08;LLMs&#xff09;在金融分析中的能力。GPT-4等大型语言模型在文本分析、解释和生成方面表现出色。 AI帮助揭示海洋和肠道中病毒的动态 摘要: 病毒在…

无人机技术:倾转旋翼飞行器的关键技术详解

一、总体设计 倾转旋翼飞行器作为一种独特的垂直起降与水平巡航的航空器&#xff0c;其总体设计是关键技术之一。总体设计涵盖了飞行器的整体布局、重量分配、气动性能、机械结构设计等多个方面。在总体设计中&#xff0c;需要充分考虑飞行器的垂直起降、悬停、过渡飞行和水平…

Docker 安装与管理

Docker 是一个开源的应用容器引擎,主要用于在 Linux 和 Windows 中创建、部署和运行应用程序。在本文中,我们将详细介绍如何在 CentOS 7 上安装和管理 Docker。 前提条件 Docker 运行在 CentOS 7 上,需要满足以下条件: 系统为 64 位系统内核版本 3.10 及以上下面是一个示例环…

二分例题(D.负重越野,I.路径规划)

这两天的训练赛都有一道二分的题&#xff0c;但是都没往二分上面想&#xff0c;同样不知道怎么二分。 D. Fast and Fat 思路 二分的关键也就是check函数怎么写了&#xff0c;求队伍最大速度&#xff0c;可以分为速度>mid和<mid两部分&#xff0c;再判断&#xff0c;能不…

流量分析入门

什么是流量分析 通过捕捉网络中流动的数据包&#xff0c;查看里面的数据和协议&#xff0c;流量分析和各种数据的统计来发现网络运行中的问题&#xff0c;在ctf中一般是一个包含流量数据的 PCAP 文件。 [陇剑杯 2021]签到 1.题目问我们正在进行的事什么协议的攻击 2.打开wire…

【ARMv7-A】——WFI(wait for interrupt)

文章目录 WFI基本原理使用场景多任务模型注意事项代码实例linux 内核中的 WFI 指令不使用 WFI 指令使用 WFI 指令WFI WFI 即 Wait for interrupt,常用于低功耗。 WFI (Wait for interrupt) 和 WFE (Wait for event) 是两个让 ARM 核进入 low-power standby 模式的指令,由 A…

【vue与iframe通讯】

vue 与 iframe 通讯 发送数据vue 向 iframe 发送数据iframe 向 vue 发送数据接收信息( vue & iframe 通用) 实现相互通讯通讯流程图实现代码vue 页面iframe页面iframe 内部重定向访问地址,更新 vue 路由 访问跨域代码下载 前言&#xff1a;vue嵌套iframe实现步骤 发送数据…

基于Pytorch框架的深度学习ShufflenetV2神经网络十七种猴子动物识别分类系统源码

第一步&#xff1a;准备数据 17种猴子动物数据&#xff1a; self.class_indict ["白头卷尾猴", "弥猴", "山魈", "松鼠猴", "叶猴", "银色绒猴", "印度乌叶猴", "疣猴", "侏绒"…

做抖音小店不懂这四个“重点”!那就别怪你的店铺,做不长久!

我相信大家做抖音小店&#xff0c;都去抖音刷过知识点&#xff0c;也去浏览器学习过技巧 但在这里&#xff0c;我给大家泼盆冷水 方法再多&#xff01;这四点不搞明白&#xff0c;那你的店铺出几天单&#xff0c;也就再也做不起来了 哪四点&#xff1f;请认真的看下去&#…

WSL2修改CPU核数

参考WSL 中的高级设置配置 | Microsoft Learn 查看LinuxCPU核数 cat /proc/cpuinfo | grep "processor" | wc -l 先关闭所有wsl终端&#xff0c;远程连接开发的IDE也需要关闭&#xff0c;因为工具链开着给你wsl没有完全关闭&#xff0c;在Windows的power shell终端…

django-celery-beat自动调度异步任务

Celery是一个简单、灵活且可靠的分布式系统&#xff0c;专门用于处理大量消息的实时任务调度。它支持使用任务队列的方式在分布的机器、进程、线程上执行任务调度。Celery不仅支持异步任务&#xff08;如发送邮件、文件上传、图像处理等耗时操作&#xff09;&#xff0c;还支持…

Mysql中的常见类型

数值型 INT 大整数类型&#xff0c;占四个字节&#xff0c;范围为-2,147,483,648 到 2,147,483,647&#xff0c;INT类型常用于存储较大的整数&#xff0c;如用户ID、记录编号、计数器等。 TINYINT 在Mysql中&#xff0c;tinyint是一个只占一个字节的无符号的整数类型&#…

2024.05.27学习记录

1、面经复习&#xff1a; 实际工作经验章节 2、代码随想录刷题&#xff1a;动态规划剩下部分和单调栈 3、rosebush 组件库完成Input 和 AutoComplete部分内容