前端js获取当前经纬度(H5/pc/mac/window都可用)

news2025/6/6 23:18:12

前端JS获取当前位置的经纬度(H5/PC/mac/window都可用,亲测!),效果如下。

 完整代码如下:


<!-- 用原生api获取经纬度,转化为百度经纬度与服务端交互, 只支持https! -->
var bdLocation= {
  init: function () {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(locationSuccess, locationError,{
            // 指示浏览器获取高精度的位置,默认为false
            enableHighAccuracy: 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.longitude
        lat = 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 boundary
    var 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;
  }

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

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

相关文章

Meta计划借助AI实现广告创作全自动化

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

AI编程规范失控?三大策略用Cursor Rules精准约束

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

4.大语言模型预备数学知识

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

免费开源Umi-OCR,离线使用,批量精准!

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

NLP驱动网页数据分类与抽取实战

一、性能瓶颈点&#xff1a;数据抽取中的「三座大山」 在使用NLP技术进行网页商品数据抽取时&#xff0c;很多工程师会遇到如下三类瓶颈&#xff1a; 1. 请求延迟高&#xff1a;目标站点反爬机制灵敏&#xff0c;普通请求频繁被封。2. 结构解析慢&#xff1a;HTML结构复杂&am…

阿里云ACP云计算备考笔记 (3)——云存储RDS

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

仓颉语言---Socket编程

一、什么是Socket编程&#xff1f; 1.定义 Socket&#xff08;套接字&#xff09;可以被理解为网络上两个进程之间通信的端点。它是网络通信的抽象表示&#xff0c;封装了底层网络协议的复杂性&#xff0c;为应用程序提供了一个简单统一的接口。 Socket 编程是一种网络编程范式…

【Java EE初阶 --- 多线程(初阶)】多线程的实现案例

乐观学习&#xff0c;乐观生活&#xff0c;才能不断前进啊&#xff01;&#xff01;&#xff01; 我的主页&#xff1a;optimistic_chen 我的专栏&#xff1a;c语言 &#xff0c;Java 欢迎大家访问~ 创作不易&#xff0c;大佬们点赞鼓励下吧~ 文章目录 前言单例模式实现单例模式…

制作一款打飞机游戏64:关卡设计

今天我想完成第一个音乐循环的关卡设计。 初始设置 首先&#xff0c;我要删除所有之前创建的敌人和“大脑”&#xff08;可能指敌人的行为模式或AI&#xff09;。我不想保留它们&#xff0c;我要从零开始&#xff0c;重新创建敌人。但我会保留精灵&#xff08;游戏中的角色或…

Python趣学篇:用Pygame打造绚烂流星雨动画

名人说&#xff1a;路漫漫其修远兮&#xff0c;吾将上下而求索。—— 屈原《离骚》 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 专栏介绍&#xff1a;《Python星球日记》 目录 一、项目简介与效果展示二、技术栈与核…

山西省第十八届职业院校技能大赛 网络建设与运维赛项 样题

山西省第十八届职业院校技能大赛 网络建设与运维赛项 &#xff08;学生组&#xff09; 样题 2024 年 11 月 xx 日 2 赛题说明 一、竞赛项目简介 “网络建设与运维”竞赛共分为模块一&#xff1a;网络理论测试与网络 运维&#xff1b;模块二&#xff1a; 网络建设与调试&a…

Python----目标检测(训练YOLOV8网络)

一、数据集标注 在已经采集的数据中&#xff0c;使用labelImg进行数据集标注&#xff0c;标注后的txt与原始 图像文件同名且在同一个文件夹&#xff08;data&#xff09;即可。 二、制作数据集 在data目录的同目录下&#xff0c;新建dataset目录&#xff0c;以存放制作好的YOLO…

构建 MCP 服务器:第一部分 — 资源入门

什么是模型上下文协议? 模型上下文协议(MCP) 是Claude等大型语言模型 (LLM) 与外部数据和功能安全交互的标准化方式。您可以将其想象成一个平视显示器,或者 AI 的 USB 端口——它提供了一个通用接口,允许任何兼容 MCP 的 LLM 连接到您的数据和工具。 MCP 提供了一个集中式协…

使用ZYNQ芯片和LVGL框架实现用户高刷新UI设计系列教程(第十五讲)

这一期讲解lvgl中日历控件的基础使用&#xff0c;Calendar 部件是一个经典日历&#xff0c;它具有以下功能&#xff1a;• 通过一个7x7矩阵显示任何月份 • 显示日期名称 • 突出显示当前日期&#xff08;今天&#xff09; • 突出显示任何用户定义的日期 日历是一个可编辑的小…

Vue中实现表格吸底滚动条效果,列太多时左右滚动条始终显示在页面中

1、安装 npm install el-table-horizontal-scroll 2、全局注册&#xff08;main.js&#xff09; import horizontalScroll from el-table-horizontal-scrollVue.use(horizontalScroll) 如下图&#xff0c;在main.js加上上面的代码 3、表格内引用 <el-table :data"…

BeeWorks 协同办公能力:局域网内企业级协作的全场景重构

在企业数字化办公场景中&#xff0c;BeeWorks 以强大的协同办公能力&#xff0c;将局域网内的通讯、协作、业务流程整合为统一整体。作为专注于企业级局域网环境的协作平台&#xff0c;其不仅提供即时通讯基础功能&#xff0c;更通过办公工具集成、会议能力强化、业务系统对接等…

C++课设:高效的日程管理系统

名人说&#xff1a;路漫漫其修远兮&#xff0c;吾将上下而求索。—— 屈原《离骚》 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 专栏介绍&#xff1a;《编程项目实战》 目录 一、C日程管理系统的时代价值1. 为什么选…

功能测试、性能测试、安全测试详解

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 一、功能测试 1、单接口功能 手工测试中的单个业务模块&#xff0c;一般对应一个接口 例如&#xff1a; 登录业务------登录接口 加入购物车业务------加入购…

提示词指南 --- 提示词的基本结构

提示词指南 --- 提示词的基本结构以及三种角色 什么是Prompt (提示词)Prompt的基本结构和三种角色提示词的三种核心“角色”&#xff08;Role&#xff09; 真实例子 什么是Prompt (提示词) 我们可以把“Prompt&#xff08;提示词&#xff09;”想象成和AI聊天时你说的“一句话…

20250605使用boot-repair来恢复WIN10和ubuntu22.04.6双系统的启动

rootrootrootroot-X99-Turbo:~$ sudo apt-get install boot-repair rootrootrootroot-X99-Turbo:~$ sudo add-apt-repository ppa:yannubuntu/boot-repair rootrootrootroot-X99-Turbo:~$ sudo apt-get install boot-repair 20250605使用boot-repair来恢复WIN10和ubuntu22.04.6…