当前位置: 首页 > article >正文

前端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;}
http://www.lryc.cn/news/2402230.html

相关文章:

  • Meta计划借助AI实现广告创作全自动化
  • AI编程规范失控?三大策略用Cursor Rules精准约束
  • 4.大语言模型预备数学知识
  • 免费开源Umi-OCR,离线使用,批量精准!
  • NLP驱动网页数据分类与抽取实战
  • 设计模式之单例模式(二): 心得体会
  • 使用Python提取PDF元数据的完整指南
  • uni-app学习笔记十八--uni-app static目录简介
  • 阿里云ACP云计算备考笔记 (3)——云存储RDS
  • 仓颉语言---Socket编程
  • Mysql的B-树和B+树的区别总结
  • 【Java EE初阶 --- 多线程(初阶)】多线程的实现案例
  • 制作一款打飞机游戏64:关卡设计
  • 开发常用的QT mql组件
  • Git操作记录
  • Vue Router的核心实现原理深度解析
  • Python趣学篇:用Pygame打造绚烂流星雨动画
  • AI系统负载均衡与动态路由
  • 山西省第十八届职业院校技能大赛 网络建设与运维赛项 样题
  • Stone 3D新版本发布,添加玩家控制和生物模拟等组件,增强路径编辑功能,优化材质编辑
  • 【Qt】之【Get√】【Bug】通过值捕获(或 const 引用捕获)传进 lambda,会默认复制成 const
  • 排序算法C语言实现
  • Python----目标检测(训练YOLOV8网络)
  • 构建 MCP 服务器:第一部分 — 资源入门
  • c# :this() 和 :base()区别
  • 使用ZYNQ芯片和LVGL框架实现用户高刷新UI设计系列教程(第十五讲)
  • Vue中实现表格吸底滚动条效果,列太多时左右滚动条始终显示在页面中
  • BeeWorks 协同办公能力:局域网内企业级协作的全场景重构
  • Mermaid 绘图--以企业权限视图为例
  • Redis(02)Win系统如何将Redis配置为开机自启的服务