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_DrivingResultif (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.mzph.cn/news/834251.shtml

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

相关文章

OpenHarmony 实战开发——南向统一编译的docker镜像来了

由于我自己的南向设备开发平台的需求&#xff0c;我将当前几个不同的 docker 镜像版本进行了整合&#xff0c;经过一段时间的攻关和验证&#xff0c;目前整合已完成&#xff0c;新版本的 Dockerfile 如下&#xff0c;这个不是公共需求&#xff0c;所以没有提交主干&#xff0c;…

Web APIs 学习归纳8---移动端特效

上一节学习了PC端的特效&#xff0c;现在学习移动端的特效。 一、移动端触屏事件 1.1 触屏事件概述 移动端浏览器兼容性较好&#xff0c;我们不需要考虑以前 JS 的兼容性问题&#xff0c;可以放心的使用原生 JS 书写效果&#xff0c;但是移动 端也有自己独特的地方。比如触屏…

容联云孔淼:大模型落地与全域营销中台建设

近日&#xff0c;由金科创新社主办的2024区域性商业银行数智化转型研讨会顺利召开&#xff0c; 容联云产业数字云事业群副总经理、诸葛智能创始人孔淼受邀出席&#xff0c;并分享数智化转型实践经验。 他分享了容联云两大核心产品&#xff0c;“大模型应用容犀Copilot”在金融营…

TypeScript 基础学习笔记:interface 与 type 的异同

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 TypeScript 学习笔记&#xff1a;interface 与 type 的异同&#x1f3a3; 引言&#x1f680; 快速入门1️⃣ Interface&#xff08;接口&#xff09;&#x1f4cb; 定义&#x1f91d; 实现&#x1f4a1; 特点 2️⃣ Type Al…

Android 高版本实现沉浸式状态栏

目前实现的android高版本沉浸式状态栏分为两类&#xff1a; 1、是纯透明状态栏&#xff1b; 2、是纯透明状态栏&#xff0c;但是状态栏字体是黑色&#xff1b; 将状态栏的代码封装到BaseActivity中更方便使用&#xff1a; BaseActivity: public abstract class BaseActivit…

AI一键换装超强电商生产力工具下载

支持win版本&#xff0c;对电脑硬件有一定的要求。建议固态硬盘留足至少30 G的空间&#xff0c;显卡n卡显存至少4G。一些低端独立显卡可能还不如高配cpu集成。 程序文件比较大&#xff0c;因为涉及到大型模型。 下载链接在后面 下载链接&#xff1a; https://pan.baidu.com…

【Linux】如何定位客户端程序的问题

文章目录 1 客户端程序和服务端程序的差别2 问题类型2.1 崩溃(crash)2.2 CPU高2.3 内存高2.4 线程卡死 3 总结 1 客户端程序和服务端程序的差别 客户端程序是运行在终端上&#xff0c;通常都会与业务系统共存&#xff0c;而服务端程序通常会运行在单独的节点上&#xff0c;或者…

Shell编程之条件语句与case语句

目录 1.条件测试 1.1 文件测试 1.2 整数测试 1.3 字符串测试 1.4 逻辑测试 2.if语句 2.1 单分支if语句 2.2 双分支if语句 2.3 多分支if语句 3.case分支语句 1.条件测试 test命令 Shell环境根据命令执行后的返回状态值&#xff08;$?&#xff09;来判断是否执行成功…

找最大数字-第12届蓝桥杯国赛Python真题解析

[导读]&#xff1a;超平老师的Scratch蓝桥杯真题解读系列在推出之后&#xff0c;受到了广大老师和家长的好评&#xff0c;非常感谢各位的认可和厚爱。作为回馈&#xff0c;超平老师计划推出《Python蓝桥杯真题解析100讲》&#xff0c;这是解读系列的第60讲。 找最大数字&#…

你会拧螺丝吗?来看看如何拧紧螺丝?——SunTorque智能扭矩系统

智能扭矩系统-智能拧紧系统-扭矩自动控制系统-SunTorque 螺丝拧紧看似简单&#xff0c;却是一门需要技巧和耐心的技术活。很多人可能会认为&#xff0c;只要把螺丝旋进孔里&#xff0c;用力拧紧就可以了。但实际上&#xff0c;拧紧螺丝的过程远不止如此。在这篇文章中&#xf…

FPGA+DDR+SERDES+USB3.0单向传输机方案,数据只能单向传输,避免反向攻击,确保系统安全

FPGADDRSERDESUSB3.0方案&#xff0c;设备包含发送端接收端&#xff0c;物料上采用光纤通讯&#xff0c;数据只能单向传输&#xff0c;避免反向攻击&#xff0c;确保系统安全 客户应用:高安全、高可靠性要求的场景 主要性能: 1.支持USB3.0传输&#xff0c;实测可达到350MB/s 2.…

做安卓应用开发的我,转前端开发了

距离转前端开发已经快3个月了&#xff0c;现在自己也慢慢的熟悉了开发。 在2月份的时候。领导找我们移动小组的谈话&#xff0c;主要是关于转前端或者后端的问题。由于公司移动端的选型&#xff0c;对安卓原生的需求降低&#xff0c;问下我们转其他开发的需求。 我毫不犹豫的选…

【C++】滑动窗口:最大连续1的个数

1.题目 2.算法思路 其实在做这道题的时候并不需要真的把0翻转成1&#xff0c;只需要找到最长的子数组且该子数组中0的个数不大于K&#xff0c;就可以了&#xff01; 当然我们首先想到的是暴力穷举法&#xff1a; 找到所有符合题意的子数组&#xff0c;跳出最长的那个就可以了…

Spring AI实战之一:快速体验(OpenAI)

欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码)&#xff1a;https://github.com/zq2599/blog_demos 关于Spring AI Spring Boot、Spring Cloud、Spring Data&#xff0c;作为一名Java程序员&#xff0c;相信您对这些概览早已耳熟能详&#xff0c;或者天天在用…

Django中如何让页面之间建立关系

今天给大家讲解两种让页面建立联系的方式 一、重定向 二、表单提交 先看第一种方式&#xff0c;重定向 首先需要了解客户端发起请求的过程 1、客户端向服务端发起请求,比如请求地址是&#xff1a;http://127.0.0.1:8000/lili/submit/ 2、程序根据路由找到视图函数 3、执行视…

sqlserver中替换空格和换行

sqlserver 中换行符&#xff0c;如下&#xff1a; sql语句如下&#xff08;只是在window系统中&#xff09;&#xff1a; //替换换行-使用char(10)或者char(13) select REPLACE(F_CNKITitle ,char(10),) title from tzkj_CNKIContent tc where --F_CnkiContentID ffdc7412-41…

AI智剪新风尚:一键操作,批量视频剪辑轻松入门

随着科技的飞速进步&#xff0c;人工智能(AI)已逐渐渗透到我们生活的各个领域&#xff0c;其中&#xff0c;AI视频剪辑技术的出现&#xff0c;为视频制作带来了革命性的变革。如今&#xff0c;一键操作、批量处理的AI智剪正成为视频剪辑的新风尚&#xff0c;让剪辑工作变得前所…

Mysql进阶-索引篇

Mysql进阶 存储引擎前言特点对比 索引介绍常见的索引结构索引分类索引语法sql分析索引使用原则索引失效的几种情况sql提示覆盖索引前缀索引索引设计原则 存储引擎 前言 Mysql的体系结构&#xff1a; 连接层 最上层是一些客户端和链接服务&#xff0c;主要完成一些类似于连接…

访问网络附加存储:nfs

文章目录 访问网络附加存储一、网络附加存储1.1、存储类型1.3、通过NFS挂载NAS1.4、NFS挂载过程服务端客户端 二、实验&#xff1a;搭建NFS服务端及挂载到nfs客户端服务端客户端测试命令合集服务端客户端 访问网络附加存储 一、网络附加存储 1.1、存储类型 DAS&#xff1a;Di…

零代码编程:用Kimichat从PDF文件中批量提取图片

一个PDF文件中&#xff0c;有很多图片&#xff0c;想批量提取出来&#xff0c;可以借助kimi智能助手。 在借助kimi智能助手中输入提示词&#xff1a; 你是一个Python编程专家&#xff0c;要完成一个网页爬取Python脚本的任务&#xff0c;具体步骤如下&#xff1a; 打开文件夹…