navigator.geolocation.getCurrentPosition 获取位置偏移

2023-11-16

navigator.geolocation.getCurrentPosition(function(position){ ... }) 获取当前位置成功返回:

  • 经度 : coords.longitude
  • 纬度 : coords.latitude
  • 准确度 : coords.accuracy
  • 海拔 : coords.altitude
  • 海拔准确度 : coords.altitudeAcuracy
  • 行进方向 : coords.heading
  • 地面速度 : coords.speed
  • 请求的时间: new Date(position.timestamp)
import { wgs84togcj02,getErrorMsg } from '@/mixins/geolocation'


// 获取当前位置
setPosApp() {
  const _this = this
  navigator.geolocation.getCurrentPosition(async function(position) {
      _this.$toast.loading({ forbidClick: true, duration: 0 });
      let point = wgs84togcj02(position.coords.longitude,position.coords.latitude) // 经纬度
      let result = await _this.$api.getPois(point);
      _this.center = result.result;
      _this.center.title = result.result.formatted_addresses.recommend
      _this.setPosition(_this.center);
    }, function(error) {
      console.log(error, error.code);
      getErrorMsg(error)
    }, {
      enableHighAcuracy: true, // 位置是否精确获取
      timeout: 5000,  // 获取位置允许的最长时间
      maximumAge: 0   // 多久更新获取一次位置
  })
},

手机app获取位置测试之后发现位置有偏移几百米,此时获取的是WGS84坐标,不够精确,网上找了个解决办法:这里

创建mixins/geolocation.js,代码贴上:

import _main from '../main';

/**
 * 定义一些常量
 */
const PI = 3.1415926535897932384626;
const a = 6378245.0;  // 长半轴
const ee = 0.00669342162296594323; // 扁率

/**
 * 定位报错信息提示
 */
export function getErrorMsg(error) {
  switch (error.code) {
    case error.PERMISSION_DENIED:
      _main.$toast("定位失败,请开启位置信息服务");
      break;
    case error.POSITION_UNAVAILABLE:
      _main.$toast("定位失败,网络不可用或链接失败");
      break;
    case error.TIMEOUT:
      _main.$toast("定位失败,请求获取用户位置超时");
      break;
    case error.UNKNOWN_ERROR:
      _main.$toast("定位失败,请重试");
      break;
  }
}

/**
 * WGS84 转换为 GCJ02
 * @param lng
 * @param lat
 * @returns {*}
 */
export function wgs84togcj02(lng, lat) {
    if (out_of_china(lng, lat)) {
        return {
          lng, lat
        }
    }
    else {
        let dlat = transformlat(lng - 105.0, lat - 35.0);
        let dlng = transformlng(lng - 105.0, lat - 35.0);
        let radlat = lat / 180.0 * PI;
        let magic = Math.sin(radlat);
        magic = 1 - ee * magic * magic;
        let sqrtmagic = Math.sqrt(magic);
        dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
        dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
        let mglat = lat + dlat;
        let mglng = lng + dlng;
        return {
          lng: mglng,
          lat: mglat
        }
    }
}

/**
 * 判断是否在国内,不在国内则不做偏移
 * @param lng
 * @param lat
 * @returns {boolean}
 */
function out_of_china (lng, lat) {
  lat = +lat
  lng = +lng
  // return !(lng > 73.66 && lng < 135.05 && lat > 3.86 && lat < 53.55)
  return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false);
}

function transformlat (lng, lat) {
  lat = +lat
  lng = +lng
  let ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));
  ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
  ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0;
  ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0;
  return ret
}

function transformlng (lng, lat) {
  lat = +lat
  lng = +lng
  let ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
  ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
  ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0;
  ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0;
  return ret
}

互联网地图坐标系分类
1、WGS84(GPS)
WGS 是世界大地测量系统(World Geodesic System)国际标准,一般从国际标准的GPS设备获取的坐标都是WGS84,以及国际地图提供商使用的坐标系。

H5中的geolocation.getCurrentPosition获取的就是这个坐标。

2、GCJ02(火星坐标)
中国标准,国测局02年发布的坐标系。又称“火星坐标”。在中国,必须至少使用“GCJ02”对地理位置进行首次加密。比如谷歌中国、高德、腾讯都在用这个坐标系。

3、BD09
百度标准,在“GCJ02”的基础上进行二次加密。

以上三者可以互相转换,怎么转换可以google或者百度,网上有很多

前端工程师不可不知的时间和地理坐标 - 知乎 (zhihu.com)

Geolocation API如何获取用户当前位置 - 知乎 (zhihu.com)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

navigator.geolocation.getCurrentPosition 获取位置偏移 的相关文章

  • 在 angularJS 中覆盖模块值/常量的最佳方法

    我用 angularJS 编写了一个模块 封装了所有后端通信 为了获得更大的灵活性 我将 api 前缀作为模块上的常量值 可能是值 因为我没有在配置阶段使用它 所以像 angular module myapp data constant a
  • 为什么 Bootstrap 需要 jQuery? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我已经多次用谷歌搜索这个问题 但从未找到满意的答案 大多数答案似乎只是说 是的 Bootstrap 插件确实需要 jQuery https st
  • 节省页面加载时间的提示[重复]

    这个问题在这里已经有答案了 我的问题 削减那些不必要的 kb 并使页面加载速度更快的最佳方法是什么 全部是什么优化实践 编码实践 在js php中 如果执行可以使您的页面更轻 为什么我问这个 我读了这篇关于 jquery js 与 jque
  • 无法将中间件与 Firebase 和 NuxtJS 3 一起使用

    我正在尝试在示例项目中使用 Firebase 身份验证 身份验证按预期工作 但是一旦我想使用中间件来阻止用户访问管理页面或在已经登录的情况下访问登录页面 这是不可能的 我已经尝试了几个小时 但没有任何效果 这是我的package json
  • 抽屉式导航不显示片段

    我创建了一个新的 Android Studio 项目 我的 MainActivity 是导航抽屉活动 所以 我无法显示碎片 我在互联网上和这里读过很多帖子 解释 我打开导航抽屉 选择菜单 播客 PodcastsFragment 应该显示 但
  • XML 文档结构必须在同一实体内开始和结束

    我是 eclipse 的新手 我刚刚开始编写一些代码 实际上只是从网站复制并粘贴 谁能帮我解决这个问题 错误出现在最后一行
  • Android 中可以导入 java.rmi.* 吗?

    我的分布式系统课程中有一个项目 我们必须在我们的项目中使用 java rmi 而且我知道由于 dalvik VM 问题 android 不提供这个库 所以我只是想问是否可以在 Android 上使用这些库 Thanks Android 不支
  • 为什么react中的组件需要大写? [复制]

    这个问题在这里已经有答案了 因此 当您声明一个组件以小写首字母进行反应时 它不会显示 也不会引发错误 当您将组件名称大写时 它确实有效 这样的实现是怎样的呢 为了避免与现有的 html 元素发生冲突 还是这是一个错误 var test Re
  • 在 NumberPicker 中显示更多数字

    我有两个问题 第一个问题是删除 NumberPicker 中的分隔线 我在 Android 中扩展 NumberPicker 来解决这个问题 如下所示 import android content Context import androi
  • 如何防止 CSS 或 jQuery 中单词和标点符号之间的换行

    我在一个段落中有一些文字 我的问题是 当标点符号位于单词末尾时 有时可以换行到下一行 像这样 This is the text This is a new line 我可以用 CSS 或 jQuery 解决这个问题吗 如果您不在单词和标点符
  • DOM 中不再存在缓存元素

    就像在类似的问题中一样 我使用appium java 尝试选择元素 在移动应用程序中 我要转到页面 之后有许多元素 android widget ImageView 0 我需要选择 6 个 例如 这样的元素并执行其他步骤 Byt 只能选择一
  • 401 未经授权的帖子回复

    我一直在使用 Angular 模板制作 Node js 网站 但我无法在 DB Mongo 上创建数据 这是代码 节点路由 var Property mongoose model Property var jwt require expre
  • 通过排列四个给定数字找到最大可能时间 HH:MM

    我最近为了工作晋升而参加了编码测试 这是我真正遇到的任务之一 我想知道什么是最好的方法来做到这一点 我使用了大量的 if 和 if else 这不是最干净的解决方案 但完成了工作 我被问到的问题是 将 4 个数字格式化为 24 小时时间 0
  • Android 布局以 开头 [重复]

    这个问题在这里已经有答案了 我是 Android 应用程序开发的初学者 我的问题很简单 我似乎无法确定布局文件夹中的 xml 文件是否应以以下开头 当我制作一个入门项目时 它不存在 但我也在读一本书 上面说它应该在那里 正确的方法是什么 嗯
  • 检测未定义的对象属性

    如何检查 JavaScript 中的对象属性是否未定义 检查属性值是否为特殊值的常用方法undefined is if o myProperty undefined alert myProperty value is the special
  • Visual Studio代码无法检测到模拟器设备或连接的电话

    I was running my app with vscode using Android emulator or my phone however all of a sudden vscode could not identify an
  • Flutter 中 Android RecyclerView.SCROLL STATE IDLE 的等价物是什么

    Android 给出的滚动状态如下RecyclerView SCROLL STATE IDLE它告诉用户何时停止滚动 我找不到任何选择在颤动中Pageview or ListView滚动监听器 我的问题 我需要检测 PageView 中的向
  • 使用 Google Visualization,为什么 DataView 内容显示在 ChartRangeFilter 中,而不显示在其关联的 LineChart 中?

    下面的代码应该从 CSV 文件填充 DataView 然后 DataView 被输入到 DashBoard 其中包含绑定在一起的 LineChart 和 ChartRangeFilter 我的问题是 虽然 ChartRangeFilter
  • PinnedHeaderListView 滚动和标题问题

    背景 我正在尝试模仿 Lollipop 的联系人应用程序显示联系人首字母的固定标题的方式 正如我所写的here https stackoverflow com q 27621425 878126 问题 由于原始代码 发现here http
  • 带有 'as' 属性的通用 React TypeScript 组件(能够渲染任何有效的 dom 节点)

    我在下面的示例中按预期工作 我的问题是 无论如何我可以重写它 这样我就不必传递通用的T和as支柱 理想情况下我想通过asprop 并让组件的 prop 接口使用它 这在 TypeScript 中可能吗 export type Props l

随机推荐

  • sqli-labs 41——65关攻略

    Less 41 基于错误的POST型单引号字符型注入 与之前讲的Less 40的区别 s q l S E L E C T F R O M u s e r s W H E R E i d sql SELECT FROM users WHERE
  • 2023年华中杯选题人数公布

    2023年华中杯选题人数公布 经过一晚上代码的编写 论文的写作 C题完整版论文已经发布 注 蓝色字体为说明备注解释字体 不能出现在大家的论文里 黑色字体为论文部分 大家可以根据红色字体的注记进行摘抄 对应的详细的写作视频教程 争取1号晚上发
  • [机器学习笔记] 支持向量机SVM 和逻辑回归LR的异同

    参考 https www cnblogs com zhizhan p 5038747 html 为什么把SVM和LR放在一起进行比较 一是因为这两个模型应用广泛 二是因为这两个模型有很多相同点 在使用时容易混淆 不知道用哪个好 特别是对初学
  • 性能测试-压力测试-jmeter简单实战

    文章目录 一 压力测试 1 性能指标 响应时间 RT HPS Hits Per second TPS Transaction Per second QPS Query Per second 最大响应时间 Max Response Time
  • oracle如何提高数据库的性能和可用性

    进行数据库优化 通过定期执行优化操作 如维护索引 调整内存参数 优化 SQL 语句等 可以提高数据库的性能和可用性 执行数据库碎片整理 通过执行表空间碎片整理 索引碎片整理 表碎片整理等操作 可以优化数据库的碎片 提高数据存储效率 执行数据
  • ruoyi对数据二次处理后分页失效

    业务场景 正常业务场景下 在service层只做一次查询就能满足需求 若需要分页 只需在Controller层添加继承BaseController 使用startPage 和getDataTable 即可 业务需求存在需要对查询的数据做二次
  • SpringCloud 服务保护机制Hystrix

    微服务高可用技术 大型复杂的分布式系统中 高可用相关的技术架构非常重要 高可用架构非常重要的一个环节 就是如何将分布式系统中的各个服务打造成高可用的服务 从而足以应对分布式系统环境中的各种各样的问题 避免整个分布式系统被某个服务的故障给拖垮
  • Unity中的C#与C++交互

    参考 Unity Manual Low level Native Plugin Interface 源码demo 演示了一个渲染三角形的例子 C 部分代码实现了对底层API的封装以及核心功能实现 RenderingPlugin cpp中定义
  • 记一次Gradle构建项目Cannot locate tasks that match ‘:xxxx‘ as task ‘xxx‘ not found in root project ‘xxxx‘错误

    问题 在使用Gradle构建项目时 遇见了一个奇怪的问题 运行报错如下 Cannot locate tasks that match xxxx as task xxx not found in root project xxxx 思路 单看
  • Linux基础学习笔记之——软件安装:源码与Tarball

    软件安装 源码与Tarball 1 开放源码的软件安装与升级简介 Linux 上面的软件几乎都是经过 GPL 的授权 所以每个软件几乎均提供源码 并且你可以自行修改该程序代码 以符合个人的需求 这就是开放源码的优点 1 1 什么是开放源码
  • 腾讯事务处理技术验证系统3TS-Coo模板安装文档&&说明文档(小白向,简单轻松就能上手)

    本篇文章将详细说明3TS Coo模板的安装和使用 帮助您快速上手项目 第一部分是简单的基础Docker相关概念 精炼的几句小白话快速理解即可 第二部分是快速安装项目环境的安装文档 简单几行命令搞定 小白也能轻松上手 第三部分是对于已经安装的
  • jupter notebook代码无法执行,出现in[*]的解决办法

    In 数字 代表已经执行的代码 其中数字代表可执行的代码编号 解决办法 点击Kernel中的Restart Run all 重新执行全部代码 系统会从In 1 依次执行 并且报错 我们一直改错即可 直至In 变为In 数字 即可
  • 使用Python爬虫和数据可视化,揭示人口大国历年人数的变迁

    前言 人口大国通常在全球人口排名中位居前列 其人口数量远远超过其他国家 而印度和中国这两个国家的人口数量均已经超过14亿 而当前全球的人口总数也不过刚刚突破80亿而已 妥妥的天花板级别存在 或许是中国和印度在人口方面的表现太过 耀眼 以至于
  • 「学习笔记」torchvision.datasets.MNIST 参数解读/中文使用手册

    DataLoader使用手册 参数解读 PyTorch torch utils data DataLoader 中文使用手册 官方手册如下 torchvision datasets MNIST root train True transfo
  • vue开发:前端项目模板

    简介 vue cli创建vue项目 整合vuex vue router axios element ui 项目模板下载地址 创建项目 Java 前端项目合集 使用vue cli创建项目 功能选择 Babel Router vuex Lint
  • HJ67 24点游戏算法

    问题描述 给出4个1 10的数字 通过加减乘除 得到数字为24就算胜利 输入 本题含有多组样例输入 4个1 10的数字 数字允许重复 但每个数字仅允许使用一次 测试用例保证无异常数字 输出 true or false 示例 输入 7 2 1
  • CRC的基本原理详解

    CRC Cyclic Redundancy Check 被广泛用于数据通信过程中的差错检测 具有很强的 检错能力 本文详细介绍了CRC的基本原理 并且按照解释通行的查表算法的由来的思路介绍 了各种具体的实现方法 1 差错检测 数据通信中 接
  • mybatisplus多条件并列复杂查询

    在使用mybatisPlus时 有时需要一些负责的sql条件拼接 这时 我们可以利用 QueryWrapper的and Consumer consumer 和 or Consumer consumer 来对条件进行拼接 查询条件拼接 例如
  • 配置AOP时报错:java.lang.ClassCastException: com.sun.proxy.$Proxy2 cannot be cast to

    报错 Exception in thread main java lang ClassCastException com sun proxy Proxy2 cannot be cast to 看报错信息 显示的是动态代理生成的类无法转换到我
  • navigator.geolocation.getCurrentPosition 获取位置偏移

    navigator geolocation getCurrentPosition function position 获取当前位置成功返回 经度 coords longitude 纬度 coords latitude 准确度 coords