Js地图路线规划以及点击获取经纬度

废话不多说,直接上代码。

代码script引用链接链接来自高德地图开放平台。(高德开放平台 | 高德地图API (amap.com)

<!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">
  <script type="text/javascript">
  	window._AMapSecurityConfig = {
  		securityJsCode: "你的安全密钥",
  	};
  </script>
  <title>位置经纬度 + 驾车规划路线</title>
  <style type="text/css">
    html,
    body,
    #container {
      width: 92%;
      height: 100%;
    }

    #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>
  <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>
  <div id="container"></div>
  <div id="panel"></div>
  <div class="input-card">
  	<h4 style="line-height: 16px;margin: 10px;">左击获取经纬度:</h4>
  	<div class="input-item">
  		<input type="text" readonly="true" id="lnglat">
  	</div>
  </div>
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=你的key值&plugin=AMap.Driving"></script>
  <script type="text/javascript">
    //基本地图加载
    var map = new AMap.Map("container", {
      resizeEnable: true,
      center: [116.397428, 39.90923],//地图中心点
      zoom: 13 //地图显示的缩放级别
    });
    //构造路线导航类
    var driving = new AMap.Driving({
      map: map,
      panel: "panel"
    });
    // 根据起终点经纬度规划驾车导航路线
    driving.search(new AMap.LngLat(116.379028, 39.865042), new AMap.LngLat(116.427281, 39.903719), function (status, result) {
      // result 即是对应的驾车导航信息,相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
      if (status === 'complete') {
        log.success('绘制驾车路线完成')
        map.setCenter([116.442581,39.882498])
      } else {
        log.error('获取驾车数据失败:' + result)
      }
    });
	//为地图注册click事件获取鼠标点击出的经纬度坐标
	map.on('click', function(e) {
		document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
	});
  </script>
</body>

</html>

感谢观看!!!

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

MySQL —— 数据类型

一、数值类型 以上表格整理了用来表示数值类型的数据类型&#xff0c;其中&#xff0c;接下来将介绍和展示其中几个类型的使用和各种细节 1.tinyint 越界测试&#xff1a;建立一个包含tinyint类型的表格&#xff0c;插入各中数据去查看结果&#xff0c;并且尝试插入边界数据和…

数字人捕捉、建模与合成

在感知系统中&#xff0c;我们与外部合作者一起创建逼真的 3D 人类&#xff0c;其行为可以像虚拟世界中的真实人类一样。这项工作在今天有许多实际应用&#xff0c;并且对于元宇宙的未来至关重要。但是&#xff0c;在感知系统中&#xff0c;我们的目标是科学的——通过重现人类…

PS五官与服装PSD文件大全,男女证件照制作必备素材

一、素材描述 男女证件照服装和五官等PSD文件大全&#xff0c;制作证件照的必备素材合集&#xff0c;轻松制作高端大气的证件照。什么是DR5&#xff1f;DR5是Delicious Retouch 5的简称&#xff0c;这是一款非常优秀的PS人像磨皮美容插件&#xff0c;DR5的主要功能就是针对人像…

AI换脸原理(4)——人脸对齐(关键点检测)参考文献2DFAN:代码解析

注意,本文属于人脸关键点检测步骤的论文,虽然也在人脸对齐的范畴下。 1、介绍 在本文中,重点介绍了以下几项创新性的成果,旨在为人脸关键点检测领域带来新的突破。 首先,成功构建了一个卓越的2D人脸关键点检测基线模型。这一模型不仅集成了目前最优的关键点检测网络结构,…

领导想提拔你,看的从来不只是努力

谁不曾做过努力工作&#xff0c;一路升职加薪的职业规划&#xff0c;现实却给很多人泼了一盆冷水。 在大家的普遍认知里&#xff0c;北上广普遍高薪&#xff0c;月入过万就是标配。 然而在逃离北上广的热门帖子下&#xff0c;有网友发出了声音&#xff1a; “我都35了&#xff…

XSS、CSRF、SSRF漏洞原理以及防御方式_xss csrf ssrf

这里写目录标题 XSS XSS攻击原理&#xff1a;XSS的防范措施主要有三个&#xff1a;编码、过滤、校正 CSRF CSRF攻击攻击原理及过程如下&#xff1a;CSRF攻击的防范措施&#xff1a; SSRF SSRF漏洞攻击原理以及方式SSRF漏洞攻击的防范措施 XMLXSS、CSRF、SSRF的区别 XSS、CSRF的…

落地护眼灯十大品牌哪款性价比高?品牌排行榜前十名全面揭晓!

落地护眼灯十大品牌哪款性价比高&#xff1f;落地护眼灯已经逐渐成为孩子日常使用率较高的电器之一&#xff0c;它的优点非常突出&#xff0c;对于学习、工作、绘画等环境都能够提供良好的健康环境&#xff0c;同时还携带多种智能调节功能&#xff0c;例如&#xff1a;入座感应…

Android 启动提示Android 正在升级...提示源码分析

正常情况下烧录的新机会有这个提示&#xff0c;因为系统启动时候要对系统APP做DexOpt优化&#xff0c;流程如下&#xff1a; 进入performBootDexOpt函数&#xff1a; 提示框代码如下&#xff1a; 而提示框的Tile和Msg如下&#xff1a; 打印Log&#xff1a; 觉得本文对…

小项目“谈笑风生”测试报告

文章目录 一、项目介绍1.1项目背景1.2功能介绍 二、测试环境三、测试执行过程3.1功能测试3.1.1登录页面测试3.1.2注册页面测试3.1.3主页面测试 3.2界面自动化测试3.2.1登录模块测试3.2.2注册模块测试3.2.3展示各种信息模块测试3.2.34聊天消息传送模块测试 四、测试结论与建议 一…

Ubuntu软件中心不显示

装完Ubuntu后没有Software -- 更新apt sudo apt update -- 升级apt sudo apt upgrade -- 重启 sudo systemctl reboot-- 安装snap sudo apt-get install snap -- 安装软件商店 sudo snap install snap-store -- 更新软件商店 sudo snap refresh snap-store安装成功&#xff01…

C语言,实现数字谱到简谱的转换(二)

C语言&#xff0c;实现数字谱到简谱的转换&#xff08;二&#xff09; 前言&#xff1a;本文初编辑于2024年5月8日 CSDN&#xff1a;https://blog.csdn.net/rvdgdsva 博客园&#xff1a;https://www.cnblogs.com/hassle 前言 结合前文使用 之前的程序默认C调4/4拍&#xff…

论文润色就用意得辑:让你的学术之作更上一层楼

在学术的海洋里&#xff0c;每一篇论文都是一艘承载智慧与探索的小船。然而&#xff0c;好的内容也需要好的包装&#xff0c;才能更好地展现其价值。在这个追求精益求精的时代&#xff0c;意得辑以其专业的论文润色服务&#xff0c;成为了众多学者们的得力助手。 意得辑&#…

matlab 基于拉依达检验法(3σ准则) 实现多类别多参数的批量异常样本检验 V2.0

简介 拉依达检验法&#xff08;3σ准则&#xff09;是一种统计学方法&#xff0c;用于检测数据中的异常值。这种方法基于正态分布的特性来确定数据点是否可能是异常值。以下是关于拉依达检验法&#xff08;3σ准则&#xff09;的详细介绍&#xff1a; 基本原理&#xff1a; 拉…

移除链表元素题目讲解

一&#xff1a;题目 二&#xff1a;思路讲解 方法一&#xff1a; 1&#xff1a;创建两个指针prev和cur&#xff0c;初识位置cur为head&#xff0c;prev为NULL&#xff0c;然后两个指针往后移动开始去寻找与val值吻合的节点&#xff0c;最后找到节点的时候&#xff0c;cur指向…

Linux基础之yum和vim

目录 一、软件包管理器yum 1.1 软件包的概念 1.2 软件包的查看 1.3 软件包的安装和删除 二、Linux编辑器之vim 2.1 vim的基本概念 2.2 正常模式&#xff08;命令模式&#xff09; 2.3 底行模式 2.4 输入模式 2.5 替换模式 2.6 视图模式 2.7 总结 一、软件包管理器yu…

SSL证书0元购完整教程

为了确保在线交互的安全性与可信度&#xff0c;越来越多的网站选择启用SSL&#xff08;Secure Sockets Layer&#xff09;证书&#xff0c;为数据传输加上一层坚实的保护罩。尤为值得一提的是&#xff0c;随着技术的发展与行业推动&#xff0c;免费SSL证书逐渐成为众多网站所有…

秒翻-网页翻译最佳选择

使用方法&#xff1a; 安装“沉浸式翻译” 在扩展设置页面勾选“Beta”特性。 输入 DeepLX 现成的 API-https://api.deeplx.org/translate。

【Git】Commit后进行事务回滚

起因 因为一直使用git add .&#xff0c;在学习pytorch中添加了一个较大的数据集后&#xff0c;导致git push失败&#xff0c;而这个大数据集并不是必须要上传到仓库的&#xff0c;但是因为自己在设置.gitignore前已经进行了git comit&#xff0c;所以&#xff0c;需要进行事务…

C#中实现DataGridView数据的优雅Excel之旅(EPPlus)

DataGridView效果图&#xff1a; EXCEL效果图: 代码如下&#xff1a; 首先要引入EPPlus包 可以使用命令行来安装 Install-Package EPPlus 也可以使用NUGet搜索EPPlus来安装 public Homes(){InitializeComponent();ExcelPackage.LicenseContext OfficeOpenXml.LicenseContext…

机器学习:人工智能中实现自动化决策与精细优化的核心驱动力

&#x1f512;文章目录: &#x1f4a5;1.概述 ❤️2.机器学习基本原理 &#x1f6e4;️2.1定义与关键概念 &#x1f6e3;️2.2 机器学习算法 ☔3.自动化决策中的机器学习应用 &#x1f6b2;4.精细优化与机器学习的结合 &#x1f44a;5.挑战与前景 &#x1f4a5;1.概述 …