高德地图通过经纬度查找位置和轨迹回放

1、完整代码自己高德申请key,其他文章有写的 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><script src="https://webapi.amap.com/maps?v=1.4.15&key="></script> <style>#map {width: 100%;height: 800px;}</style>
</head>
<body><h1>通过经纬度查找位置和轨迹回放</h1><label for="longitude">经度:</label><input type="text" id="longitude" placeholder="请输入经度"><label for="latitude">纬度:</label><input type="text" id="latitude" placeholder="请输入纬度"><button id="getAddress">查找位置</button><button id="startReplay">开始轨迹回放</button><button id="pauseReplay">暂停回放</button><button id="resumeReplay">继续回放</button><button id="stopReplay">停止回放</button><div id="output"></div><div id="map"></div><script>const map = new AMap.Map('map', {zoom: 13,center: [108.999, 34.2449]});let currentMarker = null;let replayMarker = null;// 定义轨迹数据const pathData = [[108.999, 34.2449],[109.000, 34.2452],[109.002, 34.2460],[109.004, 34.2475],[109.005, 34.2480],[109.006, 34.2485],[109.008, 34.2490],[109.010, 34.2505],[109.012, 34.2520],[109.014, 34.2535],[109.016, 34.2550],[109.018, 34.2560],[109.020, 34.2570],[109.022, 34.2580],[109.024, 34.2590],[109.026, 34.2600],[109.028, 34.2615],[109.030, 34.2630],[109.032, 34.2645],[109.034, 34.2660],[109.036, 34.2670],[109.038, 34.2680],[109.040, 34.2690],[109.042, 34.2700],[109.044, 34.2715],[109.046, 34.2730],[109.048, 34.2745],[109.050, 34.2760],[109.052, 34.2770],[109.054, 34.2780]];//绘制轨迹线const polyline = new AMap.Polyline({path: pathData,strokeColor: "#FF0000",strokeWeight: 4,map: map});document.getElementById('getAddress').addEventListener('click', function() {const longitude = document.getElementById('longitude').value;const latitude = document.getElementById('latitude').value;if (!longitude || !latitude) {document.getElementById('output').innerText = '请输入有效的经纬度。';return;}const key = '';const location = `${longitude},${latitude}`;const apiUrl = `https://restapi.amap.com/v3/geocode/regeo?key=${key}&location=${location}&extensions=all&output=JSON&radius=10`;fetch(apiUrl).then(response => response.json()).then(data => {if (data.status === '1' && data.regeocode) {const address = data.regeocode.formatted_address;document.getElementById('output').innerText = `具体位置: ${address}`;const lngLat = new AMap.LngLat(longitude, latitude);if (currentMarker) {map.remove(currentMarker);}currentMarker = new AMap.Marker({position: lngLat,title: address});currentMarker.setMap(map);map.setCenter(lngLat);map.setZoom(15);} else {document.getElementById('output').innerText = '获取具体位置失败。错误信息: ' + data.info;}}).catch(error => {console.error('错误:', error);document.getElementById('output').innerText = '请求出错,请重试。';});});// 轨迹回放控制document.getElementById('startReplay').addEventListener('click', function() {if (replayMarker) {map.remove(replayMarker);}
// 创建一个轨迹点replayMarker = new AMap.Marker({position: pathData[0],//初始轨迹点// icon: "https://webapi.amap.com/images/car.png",map: map,autoRotation: true//标记点在路径移动过程中自动旋转方向,始终保持面向前进方向});replayMarker.moveAlong(pathData, 100); // 移动速度控制});document.getElementById('pauseReplay').addEventListener('click', function() {if (replayMarker) {replayMarker.pauseMove();}});document.getElementById('resumeReplay').addEventListener('click', function() {if (replayMarker) {replayMarker.resumeMove();}});document.getElementById('stopReplay').addEventListener('click', function() {if (replayMarker) {replayMarker.stopMove();}});</script>
</body>
</html>

2、效果图 可以根据横纵坐标查询位置

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

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

相关文章

C++常用的特性-->day05

友元的拓展语法 声明一个类为另外一个类的友元时&#xff0c;不再需要使用class关键字&#xff0c;并且还可以使用类的别名&#xff08;使用 typedef 或者 using 定义&#xff09;。 #include <iostream> using namespace std;// 类声明 class Tom; // 定义别名 using …

使用docker形式部署jumpserver

文章目录 前言一、背景二、使用步骤1.基础环境准备2.拉取镜像3.进行部署4.备份记录启动命令 前言 记录一下使用docker形式部署jumpserver服务的 一、背景 搭建一个jumpserver的堡垒机&#xff0c;但是发现之前是二进制文件部署的&#xff0c;会在物理机上部署污染环境&#x…

产品经理如何使用项目管理软件推进复杂项目按时上线

前言 相信很多产品同学或多或少都有过这样的经历&#xff1a;平时没有听到任何项目延期风险&#xff0c;但到了计划时间却迟迟无法提测……评审时没有任何argue&#xff0c;提测后发现开发的功能不是自己想要的……费劲九牛二虎之力终于让项目上线了&#xff0c;然而发现成果达…

贪心算法-汽车加油

这道题目描述了一个汽车旅行场景&#xff0c;需要设计一个有效的算法来决定在哪几个加油站停车加油&#xff0c;以便最小化加油次数。题目给出了汽车加满油后的行驶距离n公里&#xff0c;以及沿途若干个加油站的位置。我们需要找出一个方案&#xff0c;使得汽车能够完成整个旅程…

【大数据学习 | HBASE】hbase的读数据流程与hbase读取数据

1. hbase的读数据流程 在解析读取流程之前我们还需要知道两个功能性的组件和HFIle的格式信息 HFILE 存储在hdfs中的hbase文件&#xff0c;这个文件中会存在hbase中的数据以kv类型显示&#xff0c;同时还会存在hbase的元数据信息&#xff0c;包括整个hfile文件的索引大小&…

2024AAAI | DiffRAW: 利用扩散模型从手机RAW图生成单反相机质量的RGB图像

文章标题&#xff1a;《DiffRAW: Leveraging Diffusion Model to Generate DSLR-Comparable Perceptual Quality sRGB from Smartphone RAW Images》 原文链接&#xff1a;DiffRAW 本文是清华大学深圳研究院联合华为发表在AAAI-2024上的论文&#xff08;小声bb&#xff1a;华…

【Linux系统编程】第四十五弹---线程互斥:从问题到解决,深入探索互斥量的原理与实现

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】 目录 1、线程互斥 1.1、见一见多线程访问问题 1.2、解决多线程访问问题 1.2.1、互斥量的接口 1.2.2、互斥量接口的使用 1.2.3、…

【GVN】AWZ算法

AWZ算法的例子依旧来自于RKS的这篇文章《Detecting Equalities of Variables: Combining Efficiency with Precision》。 上面两个图&#xff0c;进行的是如下图所示的循环结构的等价类计算。 为什么得到的结果不是上图而是下图呢&#xff1f;这里其实是因为用到的AWZ的算法…

HBuilder使用虚拟机

按文档的连接一直不成功 没找到Simulator&#xff0c;原来是因为我电脑之前没安装过虚拟机版本 安装模拟器Simulator | uni-app官网 找到settings,左下角安装需要的对应版本的虚拟机就好了&#xff0c;然后重启hb

ubuntu下安装 git 及部署cosyvoice(2)

上一节已经可以了一部分。这一节&#xff0c;主要是让他动起来。 1.第一个错误 (cosyvoice) duyichengduyicheng-computer:~/gitee/CosyVoice$ python webui.py Traceback (most recent call last): File "webui.py", line 17, in <module> import grad…

16S,18S引物覆盖度测试:SILVA和PR2

16S 进入网站&#xff1a;https://www.arb-silva.de/search/testprime/ 填写引物和错配阈值 结果进入&#xff1a;Inspect Results inTaxonomy Browser 18S 进入网站&#xff1a;Primer database 进入&#xff1a;Test your primer set 可选择感兴趣的物种group&#xff0c;红…

【Kafka 实战】如何解决Kafka Topic数量过多带来的性能问题?

&#x1f449;博主介绍&#xff1a; 博主从事应用安全和大数据领域&#xff0c;有8年研发经验&#xff0c;5年面试官经验&#xff0c;Java技术专家&#xff0c;WEB架构师&#xff0c;阿里云专家博主&#xff0c;华为云云享专家&#xff0c;51CTO 专家博主 ⛪️ 个人社区&#x…

middleware中间件概述

中间件定义 中间件&#xff08;middleware&#xff09;是基础软件的一大类&#xff0c;属于可复用软件的范畴。顾名思义&#xff0c;中间件处在操作系统、网络和数据库之上&#xff0c;应用软件的下层&#xff08;如图 15-1 所示&#xff09;​&#xff0c;也有人认为它应该属…

大模型 | 2024年中国智能算力行业白皮书 | 附PDF免费下载

智能算力&#xff0c;是数字经济发展的重要基础性资源。由于美国的科技禁运政策与国内人工智能技术差距&#xff0c;我国在实现智算资源完全国产化的道路上仍需努力。为了谋求可用算力资源在物理空间的释放和高效利用&#xff0c;国家层面持续推进“东数西算”工程&#xff0c;…

面试题之---解释一下原型和原型链

实例化对象 和普调函数一样&#xff0c;只不过调用的时候要和new连用&#xff08;实例化&#xff09;&#xff0c;不然就是一个普通函数调用 function Person () {} const o1 new Person() //能得到一个空对象 const o2 Person() //什么也得不到&#xff0c;这就是普通的…

面试:TCP、UDP如何解决丢包问题

文章目录 一、TCP丢包原因、解决办法1.1 TCP为什么会丢包1.2 TCP传输协议如何解决丢包问题1.3 其他丢包情况&#xff08;拓展&#xff09;1.4 补充1.4.1 TCP端口号1.4.2 多个TCP请求的逻辑1.4.3 处理大量TCP连接请求的方法1.4.4 总结 二、UDP丢包2.1 UDP协议2.1.1 UDP简介2.1.2…

飞凌嵌入式FET527N-C核心板现已适配Android 13

飞凌嵌入式FET527N-C核心板现已成功适配Android13&#xff0c;新系统的支持能够为用户提供更优质的使用体验。那么&#xff0c;运行Android13系统的FET527N-C核心板具有哪些突出的优势呢&#xff1f; 1、性能与兼容性提升 飞凌嵌入式FET527N-C核心板搭载了全志T527系列高性能处…

Java static静态变量 C语言文件读写

1. &#xff08;1&#xff09; public class test1 {public static void main(String[] args) {javabean1.teachername"jianjun";//直接在类调用&#xff0c;方便一点点javabean1 s1 new javabean1();s1.setName("liujiawei");s1.setAge(18);s1.setGend…

Linux驱动开发(4):Linux的设备模型

在前面写的驱动中&#xff0c;我们发现编写驱动有个固定的模式只有往里面套代码就可以了&#xff0c;它们之间的大致流程可以总结如下&#xff1a; 实现入口函数xxx_init()和卸载函数xxx_exit() 申请设备号 register_chrdev_region() 初始化字符设备&#xff0c;cdev_init函数…

MYSQL隔离性原理——MVCC

表的隐藏字段 表的列包含用户自定义的列和由系统自动创建的隐藏字段。我们介绍3个隐藏字段&#xff0c;不理解也没有关系&#xff0c;理解后面的undo log就懂了&#xff1a; DB_TRX_ID &#xff1a;6 byte&#xff0c;最近修改( 修改/插入 )事务ID&#xff0c;记录创建这条记…