前端js获取当前经纬度(H5/pc/mac/window都可用)
前端JS获取当前位置的经纬度(H5/PC/mac/window都可用,亲测!),效果如下。
完整代码如下:
<!-- 用原生api获取经纬度,转化为百度经纬度与服务端交互, 只支持https! -->
var bdLocation= {init: function () {if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(locationSuccess, locationError,{// 指示浏览器获取高精度的位置,默认为falseenableHighAccuracy: true,// 指定获取地理位置的超时时间,默认不限时,单位为毫秒timeout: 3000,// 最长有效期,在重复获取地理位置时,此参数指定多久再次获取位置。maximumAge: 3000});}else{console.log('地理位置服务不可用');}function locationError(error){ // 失败的回调switch(error.code) {case error.TIMEOUT:console.log('A timeout occured! Please try again!'); //code == 3 请求超时break;case error.POSITION_UNAVAILABLE:console.log('We can\'t detect your location. Sorry!'); //code == 2 无法获取break;case error.PERMISSION_DENIED:console.log('Please allow geolocation access for this to work.'); //code == 1 用户拒绝break;case error.UNKNOWN_ERROR:console.log('An unknown error occured!'); //一个未知的错误break;}// window10和11的chrome浏览器,137.0.7151.56 (正式版本) 获取不到经纬度,一直返回2,的处理方案if(error.code==2 || error.code==3){// 让客户端拿ip去匹配return false}};function locationSuccess(position){console.log('转化前经纬度==',position.coords.latitude,position.coords.longitude);//将WGS-84(国际标准)转为GCJ-02(火星坐标)var result1 = transformFromWGSToGCJ(position.coords.latitude, position.coords.longitude); // 将GCJ-02(火星坐标)转为百度坐标var result2 = transformFromGCJToBaidu(result1.latitude, result1.longitude);lng = result2.longitudelat = result2.latitude// console.log('转化后经纬度==',result1,result2) //转化前经纬度== 31.812083175109475 117.19544493556307//你的业务逻辑$.ajax({lng:lng,lat:lat,},function(res){console.log('res',res);})}}
}<!-- 授权 -->
bdLocation.init();
WSCoordinate.js工具库,内含坐标转换的方法。
WGS-84 是国际通用的地球坐标系标准,由美国国防部制定,GPS全球定位系统使用的坐标系。
GCJ-02 是中国国家测绘局制定的加密坐标系,官方名称为"地形图非线性保密处理算法"。
/*** 判断经纬度是否超出中国境内*/
function isLocationOutOfChina(latitude, longitude) {if (longitude < 72.004 || longitude > 137.8347 || latitude < 0.8293 || latitude > 55.8271)return true;return false;}/*** 将WGS-84(国际标准)转为GCJ-02(火星坐标):*/function transformFromWGSToGCJ(latitude, longitude) {var lat = "";var lon = "";var ee = 0.00669342162296594323;var a = 6378245.0;var pi = 3.14159265358979324;if (isLocationOutOfChina(latitude, longitude)) {lat = latitude;lon = longitude;}else {var adjustLat = transformLatWithXY(longitude - 105.0, latitude - 35.0);var adjustLon = transformLonWithXY(longitude - 105.0, latitude - 35.0);var radLat = latitude / 180.0 * pi;var magic = Math.sin(radLat);magic = 1 - ee * magic * magic;var sqrtMagic = Math.sqrt(magic);adjustLat = (adjustLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);adjustLon = (adjustLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);latitude = latitude + adjustLat;longitude = longitude + adjustLon;}return { latitude: latitude, longitude: longitude };}/*** 将GCJ-02(火星坐标)转为百度坐标:*/function transformFromGCJToBaidu(latitude, longitude) {var pi = 3.14159265358979324 * 3000.0 / 180.0;var z = Math.sqrt(longitude * longitude + latitude * latitude) + 0.00002 * Math.sin(latitude * pi);var theta = Math.atan2(latitude, longitude) + 0.000003 * Math.cos(longitude * pi);var a_latitude = (z * Math.sin(theta) + 0.006);var a_longitude = (z * Math.cos(theta) + 0.0065);return { latitude: a_latitude, longitude: a_longitude };// const x_PI = (Math.PI * 3000.0) / 180.0;// const z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * x_PI);// const theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_PI);// const bd_lng = z * Math.cos(theta) + 0.0065;// const bd_lat = z * Math.sin(theta) + 0.006;// return { latitude: bd_lat, longitude: bd_lng };}/*** 将百度坐标转为GCJ-02(火星坐标):*/function transformFromBaiduToGCJ(latitude, longitude) {var xPi = 3.14159265358979323846264338327950288 * 3000.0 / 180.0;var x = longitude - 0.0065;var y = latitude - 0.006;var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * xPi);var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * xPi);var a_latitude = z * Math.sin(theta);var a_longitude = z * Math.cos(theta);return { latitude: a_latitude, longitude: a_longitude };}/*** 将GCJ-02(火星坐标)转为WGS-84:*/function transformFromGCJToWGS(latitude, longitude) {var threshold = 0.00001;// The boundaryvar minLat = latitude - 0.5;var maxLat = latitude + 0.5;var minLng = longitude - 0.5;var maxLng = longitude + 0.5;var delta = 1;var maxIteration = 30;while (true) {var leftBottom = transformFromWGSToGCJ(minLat, minLng);var rightBottom = transformFromWGSToGCJ(minLat, maxLng);var leftUp = transformFromWGSToGCJ(maxLat, minLng);var midPoint = transformFromWGSToGCJ((minLat + maxLat) / 2, (minLng + maxLng) / 2);delta = Math.abs(midPoint.latitude - latitude) + Math.abs(midPoint.longitude - longitude);if (maxIteration-- <= 0 || delta <= threshold) {return { latitude: (minLat + maxLat) / 2, longitude: (minLng + maxLng) / 2 };}if (isContains({ latitude: latitude, longitude: longitude }, leftBottom, midPoint)) {maxLat = (minLat + maxLat) / 2;maxLng = (minLng + maxLng) / 2;}else if (isContains({ latitude: latitude, longitude: longitude }, rightBottom, midPoint)) {maxLat = (minLat + maxLat) / 2;minLng = (minLng + maxLng) / 2;}else if (isContains({ latitude: latitude, longitude: longitude }, leftUp, midPoint)) {minLat = (minLat + maxLat) / 2;maxLng = (minLng + maxLng) / 2;}else {minLat = (minLat + maxLat) / 2;minLng = (minLng + maxLng) / 2;}}}function isContains(point, p1, p2) {return (point.latitude >= Math.min(p1.latitude, p2.latitude) && point.latitude <= Math.max(p1.latitude, p2.latitude)) && (point.longitude >= Math.min(p1.longitude, p2.longitude) && point.longitude <= Math.max(p1.longitude, p2.longitude));}function transformLatWithXY(x, y) {var pi = 3.14159265358979324;var lat = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));lat += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;lat += (20.0 * Math.sin(y * pi) + 40.0 * Math.sin(y / 3.0 * pi)) * 2.0 / 3.0;lat += (160.0 * Math.sin(y / 12.0 * pi) + 320 * Math.sin(y * pi / 30.0)) * 2.0 / 3.0;return lat;}function transformLonWithXY(x, y) {var pi = 3.14159265358979324;var lon = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));lon += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;lon += (20.0 * Math.sin(x * pi) + 40.0 * Math.sin(x / 3.0 * pi)) * 2.0 / 3.0;lon += (150.0 * Math.sin(x / 12.0 * pi) + 300.0 * Math.sin(x / 30.0 * pi)) * 2.0 / 3.0;return lon;}
相关文章:

前端js获取当前经纬度(H5/pc/mac/window都可用)
前端JS获取当前位置的经纬度(H5/PC/mac/window都可用,亲测!),效果如下。 完整代码如下: <!-- 用原生api获取经纬度,转化为百度经纬度与服务端交互, 只支持https! --&g…...

Meta计划借助AI实现广告创作全自动化
每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…...

AI编程规范失控?三大策略用Cursor Rules精准约束
在 AI 编程时代,如何让助手精准理解您的项目规范?当团队协作时,如何确保每位开发者生成的代码风格统一?Cursor Rules 正是您需要的终极解决方案——它如同一位永不疲倦的架构师,通过预设规则控制 AI 的每一次代码生成、重构与补全行为。 本教程将带您深入 Cursor Rules…...

4.大语言模型预备数学知识
大语言模型预备数学知识 复习一下在大语言模型中用到的矩阵和向量的运算,及概率统计和神经网络中常用概念。 矩阵的运算 矩阵 矩阵加减法 条件:行数列数相同的矩阵才能做矩阵加减法 数值与矩阵的乘除法 矩阵乘法 条件:矩阵A的列数 矩阵…...

免费开源Umi-OCR,离线使用,批量精准!
Umi-OCR(Windows端) Umi-OCR 是一款在 GitHub 上开源的免费 OCR 识别软件,它最大的亮点就是免费、开源、支持批量处理,而且识别准确度很高。这款软件不需要联网就能用,非常值得推荐! 在 OCR 识别功能方面&…...

NLP驱动网页数据分类与抽取实战
一、性能瓶颈点:数据抽取中的「三座大山」 在使用NLP技术进行网页商品数据抽取时,很多工程师会遇到如下三类瓶颈: 1. 请求延迟高:目标站点反爬机制灵敏,普通请求频繁被封。2. 结构解析慢:HTML结构复杂&am…...
设计模式之单例模式(二): 心得体会
设计模式之单例模式(一)-CSDN博客 目录 1.背景 2.分析 2.1.违背面向对象设计原则,导致职责混乱 2.2.全局状态泛滥,引发依赖与耦合灾难 2.3.多线程场景下风险放大,性能与稳定性受损 2.4.测试与维护难度指数级上升 2.5.违背 “最小知识原…...
使用Python提取PDF元数据的完整指南
PDF文档中包含着丰富的元数据信息,这些信息对文档管理和数据分析具有重要意义。本文将详细介绍如何利用Python高效提取PDF元数据,并对比主流技术方案的优劣。 ## 一、PDF元数据概述 PDF元数据(Metadata)是包含在文档中的结构化信…...
uni-app学习笔记十八--uni-app static目录简介
本笔记内容摘录自工程简介 | uni-app官网 一个 uni-app 工程,就是一个 Vue 项目,在完成uni-app项目创建后,会生成一个static目录, 为什么需要static这样的目录? uni-app编译器根据pages.json扫描需要编译的页面&…...

阿里云ACP云计算备考笔记 (3)——云存储RDS
目录 第一章 云存储概览 1、云存储通用知识 ① 发展历史 ② 云存储的优势 2、云存储分类 3、文件存储业务场景 第二章 块存储 1、块存储分类 2、云盘的优势 3、创建云盘 4、管理数据盘 ① 格式化数据盘 ② 挂载数据盘 ③ 通过 API 挂载云盘 5、管理系统盘 ① 更…...

仓颉语言---Socket编程
一、什么是Socket编程? 1.定义 Socket(套接字)可以被理解为网络上两个进程之间通信的端点。它是网络通信的抽象表示,封装了底层网络协议的复杂性,为应用程序提供了一个简单统一的接口。 Socket 编程是一种网络编程范式…...
Mysql的B-树和B+树的区别总结
B 树也称 B- 树,全称为 多路平衡查找树,B 树是 B 树的一种变体。B 树和 B 树中的 B 是 Balanced(平衡)的意思。 目前大部分数据库系统及文件系统都采用 B-Tree 或其变种 BTree 作为索引结构。 B 树& B 树两者有何异同呢&…...

【Java EE初阶 --- 多线程(初阶)】多线程的实现案例
乐观学习,乐观生活,才能不断前进啊!!! 我的主页:optimistic_chen 我的专栏:c语言 ,Java 欢迎大家访问~ 创作不易,大佬们点赞鼓励下吧~ 文章目录 前言单例模式实现单例模式…...

制作一款打飞机游戏64:关卡设计
今天我想完成第一个音乐循环的关卡设计。 初始设置 首先,我要删除所有之前创建的敌人和“大脑”(可能指敌人的行为模式或AI)。我不想保留它们,我要从零开始,重新创建敌人。但我会保留精灵(游戏中的角色或…...
开发常用的QT mql组件
Column Column 是一种将其子项沿单个列定位的类型。它是不使用锚点的情况下垂直定位一系列项目的便捷方式。 add : Transition bottomPadding : real leftPadding : real move : Transition padding : real populate : Transition rightPadding : real spacing : rea…...
Git操作记录
一.简单上传操作 1.Git 全局设置 git config --global user.name "xxx" git config --global user.email "xxx"2.创建新存储库 git clone gitgitlab.xxx.cn:xx/xxx/xxx.git cd test touch README.md git add README.md git commit -m "add README&qu…...
Vue Router的核心实现原理深度解析
1. Vue Router的基本架构 Vue Router的核心功能是实现前端路由,即在不重新加载页面的情况下更改应用的视图。它的基本架构包括: 路由配置:定义路径与组件的映射关系路由实例:管理路由状态和提供导航方法路由视图:渲染…...

Python趣学篇:用Pygame打造绚烂流星雨动画
名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《Python星球日记》 目录 一、项目简介与效果展示二、技术栈与核…...
AI系统负载均衡与动态路由
载均衡与动态路由 在微服务架构中,负载均衡是实现服务高可用和性能优化的关键机制。传统负载均衡技术通常围绕请求数、连接数、CPU占用率等基础指标进行分发,而在AI系统中,特别是多模型、多异构算力(如CPU、GPU、TPU)共存的环境下,负载均衡不仅要考虑节点资源消耗,还需…...

山西省第十八届职业院校技能大赛 网络建设与运维赛项 样题
山西省第十八届职业院校技能大赛 网络建设与运维赛项 (学生组) 样题 2024 年 11 月 xx 日 2 赛题说明 一、竞赛项目简介 “网络建设与运维”竞赛共分为模块一:网络理论测试与网络 运维;模块二: 网络建设与调试&a…...
Stone 3D新版本发布,添加玩家控制和生物模拟等组件,增强路径编辑功能,优化材质编辑
后续版本号改为构建日期加小版本,所以最新版本为20250603.01 功能更新如下: 1. 改写fps-controls组件,简化游戏应用的创建,你只需要一个场景glb,然后给Scene节点添加fps-controls组件,即可完成一个第一人…...
【Qt】之【Get√】【Bug】通过值捕获(或 const 引用捕获)传进 lambda,会默认复制成 const
通过值捕获(或 const 引用捕获)传进 lambda,会默认复制成 const。 背景 匿名函数外部定义 QSet<QString> nameSet,需要传入匿名函数使用修改 connect(dlg, ..., [nameSet](...) {nameSet.insert(name); // ❌ 这里其实是 const QSet…...
排序算法C语言实现
算法概览 排序算法平均时间复杂度最坏时间复杂度空间复杂度稳定性适用场景插入排序O(n)O(n)O(1)稳定小规模/基本有序希尔排序O(n log n)O(n)O(1)不稳定中等规模冒泡排序O(n)O(n)O(1)稳定教学/小规模堆排序O(n log n)O(n log n)O(1)不稳定大规模数据选择排序O(n)O(n)O(1)不稳定…...

Python----目标检测(训练YOLOV8网络)
一、数据集标注 在已经采集的数据中,使用labelImg进行数据集标注,标注后的txt与原始 图像文件同名且在同一个文件夹(data)即可。 二、制作数据集 在data目录的同目录下,新建dataset目录,以存放制作好的YOLO…...

构建 MCP 服务器:第一部分 — 资源入门
什么是模型上下文协议? 模型上下文协议(MCP) 是Claude等大型语言模型 (LLM) 与外部数据和功能安全交互的标准化方式。您可以将其想象成一个平视显示器,或者 AI 的 USB 端口——它提供了一个通用接口,允许任何兼容 MCP 的 LLM 连接到您的数据和工具。 MCP 提供了一个集中式协…...
c# :this() 和 :base()区别
在 C# 中,:this() 和 :base() 都用于构造函数的重载和继承,但它们有不同的用途和上下文: 1. :this() 用途:用于调用当前类中的其他构造函数(构造函数重载)。场景:当你希望一个构造函数先执行另…...

使用ZYNQ芯片和LVGL框架实现用户高刷新UI设计系列教程(第十五讲)
这一期讲解lvgl中日历控件的基础使用,Calendar 部件是一个经典日历,它具有以下功能:• 通过一个7x7矩阵显示任何月份 • 显示日期名称 • 突出显示当前日期(今天) • 突出显示任何用户定义的日期 日历是一个可编辑的小…...

Vue中实现表格吸底滚动条效果,列太多时左右滚动条始终显示在页面中
1、安装 npm install el-table-horizontal-scroll 2、全局注册(main.js) import horizontalScroll from el-table-horizontal-scrollVue.use(horizontalScroll) 如下图,在main.js加上上面的代码 3、表格内引用 <el-table :data"…...

BeeWorks 协同办公能力:局域网内企业级协作的全场景重构
在企业数字化办公场景中,BeeWorks 以强大的协同办公能力,将局域网内的通讯、协作、业务流程整合为统一整体。作为专注于企业级局域网环境的协作平台,其不仅提供即时通讯基础功能,更通过办公工具集成、会议能力强化、业务系统对接等…...
Mermaid 绘图--以企业权限视图为例
文章目录 一、示例代码二、基础结构设计2.1 组织架构树2.2 权限视图设计 三、销售数据权限系统四、关键语法技巧汇总 一、示例代码 在企业管理系统开发中,清晰的权限视图设计至关重要。本文将分享如何使用 Mermaid 绘制直观的企业权限关系图,复制以下代…...