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;…

std::lock_guard和std::unique_lock的差别

std::lock_guard 和 std::unique_lock 都是 C 标准库 <mutex> 中提供的用于管理互斥体&#xff08;mutex&#xff09;的 RAII&#xff08;Resource Acquisition Is Initialization&#xff09;风格的类。它们的主要目标都是确保互斥体在适当的时候被锁定和解锁&#xff0…

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

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

Go语言函数

在Go语言中&#xff0c;函数是一种基本的构建块&#xff0c;用于组织代码并执行特定任务。它们是可重复使用的代码段&#xff0c;可以接收输入参数&#xff0c;执行一系列操作&#xff0c;并可返回结果。以下是Go语言中函数的详细介绍及其使用方法&#xff1a; 基本语法 Go语…

让新手变中手的ChatGPT 使用方法

让新手变中手的ChatGPT 使用方法 已经要一年了,没想到这篇还是一样有用。看到许多依然是一句话就要问出结果的教学,就知道AI 进步很快,但人的学习速度还需要更多时间。 以下为去年原版内容加上新的两招更新,希望帮助你使用ChatGPT 更好用,当未来文字可直接生成影像时,你…

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

近日&#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…

如何在Linux中安装Docker Compose

下载安装 在Linux中安装Docker Compose相对简单&#xff0c;你可以按照以下步骤进行 确保Docker已经安装   Docker Compose需要在系统上安装了Docker才能正常工作。如果你的系统上还没有安装Docker&#xff0c;请先安装Docker。 下载Docker Compose   你可以从Docker官方Gi…

记录HCIP学习过程中的疑问

1、查看协议路由表、本地核心路由表、FIB表的命令&#xff1f;&#xff1f;&#xff1f; 查看FIB表&#xff1a;display fib [ slot-id ] 2、最优路由选择&#xff0c;当达到目的地址的路由有多条时&#xff0c;本地核心路由 与FIB表的情况&#xff1f;&#xff1f;&#xf…

代码随想录算法训练营第四十四天

sad的一天&#xff0c;明天开始上班&#xff0c;而且娃还行&#xff0c;媳妇儿状态不稳定&#xff0c;太难了也&#xff01;&#xff01;&#xff01; 完全背包 #include<vector> #include<iostream> using namespace::std; int main(){int N;//种类int V;//空间ci…

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;或者…

怎麼檢測線上代理IP是否生效?

代理IP在保護網路隱私、繞過地理限制、提高網路安全等方面發揮著重要的作用。使用代理IP時&#xff0c;經常會涉及到一個問題&#xff1a;如何確定代理IP是否生效&#xff1f;在這篇文章中&#xff0c;我們將詳細討論幾種檢測線上代理IP是否生效的方法。 一、使用線上代理檢測…

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.…

c#设置或者获取一个泛型整数指定bit的值

1.设置 代码如下&#xff08;示例&#xff09;&#xff1a; /// <summary>/// 设置一个整形数的每一个bit的值/// </summary>/// <typeparam name"T"></typeparam>/// <param name"flag">bit位0或者1</param>/// <…

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

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