前端研发高德地图,如何根据经纬度获取地点名称和两点之间的距离?

地理编码与逆地理编码
根据经纬度获取地址
引入插件,此示例采用异步引入,更多引入方式 https://lbs.amap.com/api/javascript-api-v2/guide/abc/plugins

AMap.plugin("AMap.Geocoder", function () {var geocoder = new AMap.Geocoder({city: "010", // city 指定进行编码查询的城市,支持传入城市名、adcode 和 citycode});var lnglat = [116.396574, 39.992706];geocoder.getAddress(lnglat, function (status, result) {if (status === "complete" && result.info === "OK") {// result为对应的地理位置详细信息console.log(result);}});
});
  1. 地图的单击事件:
// 初始化地图const map = new AMap.Map('container',{});
map.on('click', () => {console.log('触发地图鼠标左键单击事件');// 可以拿到经纬度
});

属性:
事件属性

  1. 地址获取。拿到经纬度后可通过逆地理编码拿到地址,方法名getAddress。参考文档:地理编码与逆地理编码-服务插件和工具-进阶教程-地图 JS API 2.0 | 高德地图API
AMap.plugin("AMap.Geocoder", function () {var geocoder = new AMap.Geocoder({city: "010", // city 指定进行编码查询的城市,支持传入城市名、adcode 和 citycode});var lnglat = [116.396574, 39.992706];geocoder.getAddress(lnglat, function (status, result) {if (status === "complete" && result.info === "OK") {// result为对应的地理位置详细信息console.log(result);}});
});
  1. 两点之间的距离计算,拿到两点经纬度即可。
    核心代码: var distance = Math.round(p1.distance(p2));
    高德的示例是这样的:
    参考手册-地图 JS API 2.0 | 高德地图API 距离计算
   //初始化地图对象,加载地图var map = new AMap.Map("container", {resizeEnable: true,zoom: 13});var m1 = new AMap.Marker({map: map,draggable:true,position: new AMap.LngLat(116.368904, 39.923423)});var m2 = new AMap.Marker({map: map,draggable:true,position:new AMap.LngLat(116.387271, 39.922501)});map.setFitView();var line = new AMap.Polyline({strokeColor:'#80d8ff',isOutline:true,outlineColor:'white'});line.setMap(map);var text = new AMap.Text({text:'',style:{'background-color':'#29b6f6','border-color':'#e1f5fe','font-size':'12px'}});text.setMap(map)function computeDis(){var p1 = m1.getPosition();var p2 = m2.getPosition();var textPos = p1.divideBy(2).add(p2.divideBy(2));var distance = Math.round(p1.distance(p2));var path = [p1,p2];line.setPath(path);text.setText('两点相距'+distance+'米')text.setPosition(textPos)}computeDis();m1.on('dragging', computeDis)m2.on('dragging', computeDis)

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

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

相关文章

React(二)

文章目录 项目地址七、数据流7.1 子组件传递数据给父组件7.1.1 方式一:給父设置回调函数,传递给子7.1.2 方式二:直接将父的setState传递给子7.2 给props传递jsx7.2.1 方式一:直接传递组件给子类7.2.2 方式二:传递函数给子组件7.3 props类型验证7.4 props的多层传递7.5 cla…

SpringBootTest常见错误解决

1.启动类所在包错误 问题 由于启动类所在包与需要自动注入的类的包不在一个包下: 启动类所在包: com.exmaple.test_02 但是对于需要注入的类却不在com.exmaple.test_02下或者其子包下,就会导致启动类无法扫描到该类,从而无法对…

Redis面试篇笔记(持续更新)

一、redis主从集群 单节点redis的并发能力是由上限的,要进一步提高redis的并发能力可以搭建主从集群,实现读写分离,一主多从,主节点写数据,从节点读数据 部署redis主从节点的docker-compose文件命令解析 version: &q…

ISUP协议视频平台EasyCVR私有化视频平台新能源汽车充电停车管理方案的创新与实践

在环保意识提升和能源转型的大背景下,新能源汽车作为低碳出行的选择,正在全球迅速推广。但这种快速增长也引发了充电基础设施短缺和停车秩序混乱等挑战,特别是在城市中心和人口密集的居住区,这些问题更加明显。因此,开…

goland单元测试

一、单元测试的概念 1.1 什么是单元测试,有什么用? 单元测试是针对于函数的测试,用来保证该函数的逻辑正确性。 1.2 单元测试的要求? 1. 单元测试在正式上线之前应该全部自动执行,并且需要保证全部通过 2. 单元测试需…

连接数据库:通过链和代理查询鲜花信息

目录 新的数据库查询范式 实战案例背景信息 创建数据库表 用 Chain 查询数据库 用 Agent 查询数据库 一直以来,在计算机编程和数据库管理领域,所有的操作都需要通过严格、专业且结构化的语法来完成。这就是结构化查询语言(SQL&#xff0…

【c++丨STL】stack和queue的使用及模拟实现

🌟🌟作者主页:ephemerals__ 🌟🌟所属专栏:C、STL 目录 前言 一、什么是容器适配器 二、stack的使用及模拟实现 1. stack的使用 empty size top push和pop swap 2. stack的模拟实现 三、queue的…

aws上安装ssm-agent

aws-cloudwatch 连接机器 下载ssm-agent aws-ec2 安装ssm-agent aws-linux安装ssm-agent 使用 SSM 代理查找 AMI 预装 先运行:systemctl status amazon-ssm-agent 查看sshm-agent的状态。 然后安装提示,执行 systemctl start amazon-ssm-agent 启动即…

百度世界2024:智能体引领AI应用新纪元

在近日盛大举行的百度世界2024大会上,百度创始人李彦宏以一场题为“文心一言”的精彩演讲,再次将全球科技界的目光聚焦于人工智能(AI)的无限可能。作为一名科技自媒体,我深感这场演讲不仅是对百度AI技术实力的一次全面…

纯血鸿蒙NEXT-组件导航 (Navigation)

Navigation组件是路由导航的根视图容器,一般作为Page页面的根容器使用,其内部默认包含了标题栏、内容区和工具栏,其中内容区默认首页显示导航内容(Navigation的子组件)或非首页显示(NavDestination的子组件…

C语言 | Leetcode C语言题解之第564题寻找最近的回文数

题目&#xff1a; 题解&#xff1a; #define MAX_STR_LEN 32 typedef unsigned long long ULL;void reverseStr(char * str) {int n strlen(str);for (int l 0, r n-1; l < r; l, r--) {char c str[l];str[l] str[r];str[r] c;} }ULL * getCandidates(const char * n…

docker学习笔记跟常用命令总结

Docker简介 Docker是一个用于构建运行传送应用程序的平台 镜像 将应用所需的函数库、依赖、配置等与应用一起打包得到的就是镜 镜像结构 镜像管理命令 命令说明docker pull拉取镜像docker push推送镜像docker images查看本地镜像docker rmi删除本地镜像docker image prune…

MySQL 中 InnoDB 支持的四种事务隔离级别名称,以及逐级之间的区别?

MySQL中的InnoDB存储引擎支持四种事务隔离级别&#xff0c;这些级别定义了事务在并发环境中的行为和相互之间的可见性。以下是这四种隔离级别的名称以及它们之间的区别&#xff1a; 读未提交&#xff08;Read Uncommitted&#xff09; 特点&#xff1a;这是最低的隔离级别&…

【力扣热题100】[Java版] 刷题笔记-226. 翻转二叉树

题目:226. 翻转二叉树 给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 解题思路 二叉树翻转&#xff0c;可以通过递归进行交换。 解题过程 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeN…

Android kotlin之配置kapt编译器插件

配置项目目录下的gradle/libs.versions.toml文件&#xff0c;添加kapt配置项&#xff1a; 在模块目录下build.gradle.kt中增加 plugins {alias(libs.plugins.android.application)alias(libs.plugins.jetbrains.kotlin.android)// 增加该行alias(libs.plugins.jetbrains.kotl…

【Linux学习】【Ubuntu入门】1-8 ubuntu下压缩与解压缩

1.Linux系统下常用的压缩格式 常用的压缩扩展名&#xff1a;.tar、.tar.bz2、.tar.gz 2.Windows下7ZIP软件安装 Linux系统下很多文件是.bz2&#xff0c;.gz结尾的压缩文件。 3.Linux系统下gzip压缩工具 gzip工具负责压缩和解压缩.gz格式的压缩包。 gzip对单个文件进行…

【Linux】【Shell】Shell 基础与变量

Shell 基础 Shell 基础查看可用的 Shell判断当前 Shell 类型 变量环境变量查看环境变量临时环境变量永久环境变量PATH 变量 自定义变量特殊赋值(双引号、单引号、反撇号) 预定义变量bashrc Shell 基础 Shell 是一个用 C 语言编写的程序&#xff0c;相当于是一个翻译&#xff0c…

自动语音识别(ASR)与文本转语音(TTS)技术的应用与发展

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

React可以做全栈开发吗

React可以做全栈开发吗? 答案是肯定的&#xff0c;而且还比较完美 React可以用于全栈开发&#xff0c;以下是具体的介绍&#xff1a; 前端部分 构建用户界面 React是一个用于构建用户界面的JavaScript库&#xff0c;它通过组件化的方式让开发者能够高效地创建交互式的UI。例…

折叠光腔衰荡高反射率测量技术的matlab模拟理论分析

折叠光腔衰荡高反射率测量技术的matlab模拟理论分析 1. 前言2. 光腔模型3. 光腔衰荡过程4. 衰荡时间与反射率的关系5. 测量步骤①. 光腔调节&#xff1a;②. 光腔衰荡测量&#xff1a;③. 计算衰荡时间常数&#xff1a;④. 反射率计算&#xff1a; 6. 实际应用中的调整7. 技术优…