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

地理编码与逆地理编码
根据经纬度获取地址
引入插件,此示例采用异步引入,更多引入方式 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)

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

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

相关文章

Linux上使用SELinux保护网络服务

前言 SELinux(Security-Enhanced Linux)是一种安全模块,用于增强基于 Linux 的操作系统的安全性。 它通过强制访问控制(MAC)机制来限制进程和用户对系统资源的访问权限,从而防止未经授权的操作。 在 SELin…

【Linux】僵尸进程、进程状态简介

本文内容均来自个人笔记并重新梳理,如有错误欢迎指正! 如果对您有帮助,烦请点赞、关注、转发、订阅专栏! 专栏订阅入口 | 精选文章 | Kubernetes | Docker | Linux | 羊毛资源 | 工具推荐 | 往期精彩文章 【Docker】(全…

uniapp 选择 省市区 省市 以及 回显

从gitee仓库可以拿到demo 以及 json省市区 文件 // 这是组件部分 <template><uni-popup ref"popup" type"bottom"><view class"popup"><view class"picker-btn"><view class"left" click"…

Unity Dots下的动画合批工具:GPU ECS Animation Baker

书接上文&#xff0c;为了实现大批量物体的生成&#xff0c;我们准备使用Unity最新的dots系统&#xff0c;在该系统下找到了动画解决方案&#xff1a;GPU ECS Animation Baker。 导入的同时&#xff0c;也需要导入以下两个插件&#xff0c;否则会提示报错&#xff1a; PS&…

windows上部署flask程序

文章目录 前言一、准备工作二、配置 Gunicorn 或 uWSGI1.安装 Waitress2.修改启动文件来使用 Waitress 启动 Flask 应用3.配置反向代理&#xff08;可选&#xff09;4.启动程序访问 三.Flask 程序在 Windows 启动时自动启动1.使用 nssm&#xff08;Non-Sucking Service Manager…

共享单车管理系统项目学习实战

前言 Spring Boot Vue前后端分离 前端&#xff1a;Vue&#xff08;CDN&#xff09; Element axios(前后端交互) BaiDuMap ECharts(图表展示) 后端&#xff1a;Spring Boot Spring MVC(Web) MyBatis Plus(数据库) 数据库:MySQL 验证码请求

python中Pandas操作excel补全内容

补全ID、InStore、Date import random from datetime import datetime, timedeltaimport pandas as pdfile_path r"C:\Users\xb\Desktop\Books_1.xlsx" books pd.read_excel(iofile_path, skiprows3, usecols"C:F", dtype{"ID": str, "I…

40分钟学 Go 语言高并发:Goroutine基础与原理

Day 03 - goroutine基础与原理 1. goroutine创建和调度 1.1 goroutine基本特性 特性说明轻量级初始栈大小仅2KB&#xff0c;可动态增长调度方式协作式调度&#xff0c;由Go运行时管理创建成本创建成本很低&#xff0c;可同时运行数十万个通信方式通过channel进行通信&#x…

Python学习------第十天

数据容器-----元组 定义格式&#xff0c;特点&#xff0c;相关操作 元组一旦定义&#xff0c;就无法修改 元组内只有一个数据&#xff0c;后面必须加逗号 """ #元组 (1,"hello",True) #定义元组 t1 (1,"hello") t2 () t3 tuple() prin…

nwjs崩溃复现、 nwjs-控制台手动操纵、nwjs崩溃调用栈解码、剪切板例子中、nwjs混合模式、xdotool显示nwjs所有进程窗口列表

-1. nwjs在低版本ubuntu运行情况 ubuntu16.04运行nw-v0.93或0.89报错找不到NSS_3.30、GLIBC_2.25 uname -a #Linux Asus 4.15.0-112-generic #113~16.04.1-Ubuntu SMP Fri Jul 10 04:37:08 UTC 2020 x86_64 x86_64 x86_64 GNU/Linux cat /etc/issue #Ubuntu 16.04.7 LTS \n \l…

在自动驾驶进行大数据量因果推理实验时,如何减少无用功,提高实验效率?

在对实验结果做反事实推理时&#xff0c;通常需要对数据进行多次循环&#xff0c;然后对多次循环的结果进行处理&#xff0c;如果只在最后结果结束时&#xff0c;再进行处理&#xff0c;可能会由于反事实过程中某个参数设置错误&#xff0c;导致整个反事实实验出现错误&#xf…

DAY1 网络编程(TCP客户端服务器)

作业&#xff1a; TCP客户端服务器。 server服务器代码&#xff1a; #include <myhead.h> #define IP "192.168.110.52" #define PORT 8886 #define BACKLOG 20 int main(int argc, const char *argv[]) {int oldfdsocket(AF_INET,SOCK_STREAM,0);//IPV4通信…

Kafka怎么发送JAVA对象并在消费者端解析出JAVA对象--示例

1、在pom.xml中加入依赖 <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-stream-kafka</artifactId><version>3.1.6</version></dependency> 2、配置application.yml 加入Kafk…

【SQL实验】视图操作(菜单操作和命令操作)

完整代码在文章末尾【代码是自己的解答&#xff0c;并非标准答案&#xff0c;也有可能写错&#xff0c;文中可能会有不准确或待完善之处&#xff0c;恳请各位读者不吝批评指正&#xff0c;共同促进学习交流】 &#xff08;一&#xff09;菜单操作 1.建立视图“课程”&#xff…

python基础知识(七)——写入excel

一、写入excel 写入数据到excel wb load_workbook("testcase_api_wuye.xlsx") #打开一个已经存在的excel文件 sh wb["register"] #识别某一个表单 sh.cell(row 2,column 8).value "pass" #写入数据&#xff0c;单元格的值赋值 wb.sav…

MATLAB绘图基础11:3D图形绘制

参考书&#xff1a;《 M A T L A B {\rm MATLAB} MATLAB与学术图表绘制》(关东升)。 11.3D图形绘制 11.1 3D图概述 M A T L A B {\rm MATLAB} MATLAB的 3 D {\rm 3D} 3D图主要有&#xff1a; 3 D {\rm 3D} 3D散点图、 3 D {\rm 3D} 3D线图、 3 D {\rm 3D} 3D曲面图、 3 D {\rm…

ssm148基于Spring MVC框架的在线电影评价系统设计与实现+jsp(论文+源码)_kaic

毕 业 设 计&#xff08;论 文&#xff09; 题目&#xff1a;在线电影评价系统设计与实现 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本在线电影评价系…

激光slam学习笔记5---ubuntu2004部署运行fastlivo踩坑记录

背景&#xff1a;看看fastlivo论文&#xff0c;觉得挺有意思的&#xff0c;就本地部署跑跑看看效果。个人环境&#xff0c;ubuntu20.04。 一、概要 由于依赖比较多&#xff0c;个人构建工作空间&#xff0c;使用catkin_make编译 src├── FAST-LIVO├── livox_ros_driver…

12. 利用“文件组织”实现石头剪刀布小游戏

文章目录 概要整体架构流程技术名词解释小结 1. 概要 ~ Jack Qiao对米粒说&#xff1a;“前面咱们了解过“文件组织”&#xff0c;让我们利用“文件组织”来制作一个有趣的“石头、剪刀、布”小游戏。”举个栗子&#xff1a; > 程序随机生成一个选择&#xff08;石头、剪刀…

VRT: 关于视频修复的模型

VRT: 关于视频修复的模型 1. 视频修复的背景与重要性背景介绍&#xff1a;重要性&#xff1a; 2. VRT的重要性和研究背景VRT的背景&#xff1a;VRT的重要性&#xff1a; 3. 视频修复概述3.1 定义与目标3.2 与单图像修复的区别3.3 对时间信息利用的需求 4. VRT模型详解4.1 整体框…