微信小程序获取定位显示在百度地图上位置出现偏差

项目场景:

背景:

  1. 微信小程序端获取手机定位坐标,以及正确展示位置
  2. 通过详细地址解析为定位坐标显示在小程序端以及PC后台
  3. 小程序获取的地理坐标与百度地图坐标相互转化

相关知识

目前国内主要有以下三种坐标系:

  1. WGS84:为一种大地坐标系,也是目前广泛使用的GPS全球卫星定位系统使用的坐标系。
  2. GCJ02:又称火星坐标系,是由中国国家测绘局制订的地理信息系统的坐标系统。由WGS84坐标系经加密后的坐标系。
  3. BD09:为百度坐标系,在GCJ02坐标系基础上再次加密。其中bd09ll表示百度经纬度坐标,bd09mc表示百度墨卡托米制坐标。
    非中国地区地图,服务坐标统一使用WGS84坐标。
坐标系使用厂商
大地坐标系(WGS84)GPS定位系统及相关设备、谷歌地图
火星坐标(GCJ02)高德地图、阿里云地图、 腾讯搜搜地图 、高德MapABC地图API 、小程序百度地图
百度坐标(BD09)百度地图
图吧坐标图吧MapBar地图

问题描述

小程序端获取的坐标显示在百度地图上地理位置出现偏差:

解决问题

小程序获取的定位坐标可选type 有两种 wgs84 : gps定位坐标, gcj02: 火星定位坐标。

  • type:wgs84返回gps坐标,gcj02 返回可用于wx.openLocation的坐标;
  • altitude:传入 true 会返回高度信息,由于获取高度需要较高精确度,会减慢接口返回速度;
    isHighAccuracy:开启高精度定位;
  • highAccuracyExpireTime:高精度定位超时时间(ms),指定时间内返回最高精度,该值3000ms以上高精度定位才有效果;
wx.getLocation({// type: 'wgs84', // gps定位 坐标系type: 'gcj02', // 重点就是在这里,最好使用这种,对接百度小程序端地址解析 success: function(){},fail: function(){}
})
  1. 小程序端使用百度地图api 地址解析为详细地址 ,传入的坐标系需要为 gcj02类型,并不是百度坐标系
const bmap = require("../../utils/bmap-wx.js"); // 引入bmap-wx文件var BMap = new bmap.BMapWX({ak:  "你申请的小程序百度地图的ak"})BMap.regeocoding({location: res.latitude + ',' + res.longitude,  // 百度api 地址解析,使用的坐标点类型为 gcj02success: function (res) {console.log(res.originalData.result.sematic_description)},fail: function () {}})
  1. 小程序端获取的定位需要转化为百度系坐标用于后端展示,则需要通过一定的算法将gcj02转化为百度坐标,这里有写好的算法, 大家直接粘贴

WSCoordinate.js

/***  判断经纬度是否超出中国境内*/
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 };}/***  将百度坐标转为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;}module.exports = {isLocationOutOfChina: isLocationOutOfChina,transformFromWGSToGCJ: transformFromWGSToGCJ,transformFromGCJToBaidu: transformFromGCJToBaidu,transformFromBaiduToGCJ: transformFromBaiduToGCJ,transformFromGCJToWGS: transformFromGCJToWGS}
  1. 直接上代码转化 调用BMapWX.regeocoding方法进行逆地址解析(从经纬度转换为地址信息)
const utils = require("../../utils/WSCoordinate.js")
wx.getLocation({// type: 'wgs84', // gps定位 坐标系type: 'gcj02', // 重点就是在这里success: function (res) {// gcj02 转换成百度地图坐标,用于传给PC端 百度地图展示const marker = utils.transformFromGCJToBaidu(res.latitude, res.longitude)that.setData({locationFlag: false,map_latitude: marker.latitude,map_longitude: marker.longitude})BMap.regeocoding({location: res.latitude + ',' + res.longitude,success: function (res) {that.setData({desLocation: res.originalData.result.sematic_description})},fail: function () {wx.showToast({title: '请检查位置服务是否开启',})},});},fail: function () {console.log('fail:', '授权失败')}})

5 地址解析(从地址转换为坐标)

const bmap = require("../../lib/bmap-wx.js"); // 引入bmap-wx文件
const util = require('../../lib/WSCoordinate.js')  // 新建百度地图对象var BMap = new bmap.BMapWX({ak: "你的ak", // 你的ak});// 发起geocoding检索请求BMap.geocoding({address: address, // 输入详细地址            success: (data) => {  // 获取的坐标为 gcj02坐标,并不是百度坐标,需要转换为百度坐标const wxMarkerData = data.wxMarkerData[0]// 将GCJ-02(火星坐标)转为百度坐标let resultMarker = util.transformFromGCJToBaidu( wxMarkerData.latitude, wxMarkerData.longitude)// console.log(resultMarker, 'resultMarker')this.setData({latitude: resultMarker.latitude, // 纬度longitude: resultMarker.longitude // 经度})},fail: (error) => { console.log('error:', error)},
})

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

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

相关文章

【无标题】发生

直接定值法 hash 函数 hash(key)a*keyb; 数字分析法&#xff1a; 取模法&#xff08;除留余数法&#xff09; hash(key)key%p 1001最大质数 p<m (表长&#xff09; 平方取中法

SpringCloud之服务网关Gateway组件使用——详解

目录 一、网关介绍 1.什么是服务网关 2. 为什么需要网关 3.网关组件在微服务中架构 二、服务网关组件 1. zuul 1.x 2.x(netflix 组件) 1.1 zuul版本说明 2. gateway (spring) 2.1 特性 2.2 开发网关动态路由 2.2.1.创建项目引入网关依赖 2.2.2 快捷方式配置路由 2.2…

Java面向对象第5天

精华笔记&#xff1a; package&#xff1a;声明包 作用&#xff1a;避免类的命名冲突 同包中的类不能同名&#xff0c;但不同包中的类可以同名 类的全称&#xff1a;包名.类名&#xff0c;常常有层次结构 建议&#xff1a;包名所有字母都小写 import&#xff1a;导入类、引入…

Vue3挂载完毕后,隐藏dom再重新加载组件的方法

组件原本是在PC端使用的&#xff0c;现在需要把组件再封装一次&#xff0c;供app调用&#xff0c;但是在app上会显示tag栏&#xff0c;有占位影响空间&#xff0c;所以需求去掉头部tag&#xff0c;只显示下方组件。 实现方法&#xff0c;以前是直接引用的组件&#xff0c;现在改…

简介vue

目录 一、介绍 渐进式框架​ 单文件组件​ 选项式 API (Options API)​ 组合式 API (Composition API)​ 该选哪一个&#xff1f;​ 创建一个 Vue 应用 应用实例​ 根组件​ DOM 中的根组件模板 应用配置​ 多个应用实例​ 一、介绍 Vue (发音为 /vjuː/&#xff…

.NET生成微信小程序推广二维码

前言 对于小程序大家可能都非常熟悉了&#xff0c;随着小程序的不断普及越来越多的公司都开始推广使用起来了。今天接到一个需求就是生成小程序码&#xff0c;并且与运营给的推广图片合并在一起做成一张漂亮美观的推广二维码&#xff0c;扫码这种二维码就可以进入小程序。为了…

【开源】基于Vue.js的大学计算机课程管理平台的设计和实现

项目编号&#xff1a; S 028 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S028&#xff0c;文末获取源码。} 项目编号&#xff1a;S028&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 实验课程档案模块2.2 实验资源模块2…

vue项目实现生成一个简单二维码

vue项目中实现的 一个简单的二维码生成例子 首先安装一下插件 npm install qrcodejs2 --save然后尝试走通下面的业务 <template><div class"qrcode"><h1>生成二维码</h1><label for"text">请输入要转换为二维码的内容&…

前端环境变量释义process.env与import.meta.env

视频教程 彻底搞懂前端环境变量使用和原理&#xff0c;超清楚_哔哩哔哩_bilibili 添加命令行参数 --modexxxxx 新建.env.xxxx文件,其中.env文件会在所有环境下生效 以VITE_开头&#xff0c;字符串无需加双引号 使用import.meta.env.VITE_xxxxx进行调用

C++Primer(中文版)(第五版)【读书笔记 + 思考总结】

CPrimer&#xff08;中文版&#xff09;&#xff08;第五版&#xff09;【读书笔记 思考总结】 第7章 类什么是数据抽象&#xff1f;什么是封装&#xff1f;什么是抽象数据类型&#xff1f;一个设计良好的类应该提供什么&#xff1f;什么是inline函数&#xff1f;inline函数有…

【数据结构】树与二叉树(廿四):树搜索指定数据域的结点(算法FindTarget)

文章目录 5.3.1 树的存储结构5. 左儿子右兄弟链接结构 5.3.2 获取结点的算法1. 获取大儿子、大兄弟结点2. 搜索给定结点的父亲3. 搜索指定数据域的结点a. 算法FindTargetb. 算法解析c. 代码实现a. 使用指向指针的指针b. 直接返回找到的节点 4. 代码整合 5.3.1 树的存储结构 5.…

C++之模版初阶(简单使用模版)

前言 在学习C的模版之前&#xff0c;咱们先来说一说模版的概念&#xff0c;模版在我们的日常生活中非常常见&#xff0c;比如我们要做一个ppt&#xff0c;我们会去在WPS找个ppt的模版&#xff0c;我们只需要写入内容即可&#xff1b;比如我们的数学公式&#xff0c;给公式套值&…

计算机人机界面

人机界面是指入与机器之间相互交流和影响的区域。人机界面包括对数据和信息的输入和输出方法&#xff0c;以及人们对机器的操作和控制。早期&#xff0c;人机交互界面是控制合&#xff0c;随后通过键盘进行操作&#xff0c;目前为鼠标和键盘操作&#xff0c;而智能手机采用触摸…

【Linux】基本指令(二)

本文续接上文基本指令&#xff08;一&#xff09; 目录 cpmvcatmore && less cp 语法&#xff1a;cp [选项] 源文件或目录 目标文件或目录 功能: 复制文件或目录 说明: cp指令用于复制文件或目录&#xff0c;如同时指定两个以上的文件或目录&#xff0c;且最后的目的地…

第一节HarmonyOS DevEcoStudio工具下载以及环境搭建

一、下载与安装DevEco Studio 在HarmonyOS应用开发学习之前&#xff0c;需要进行一些准备工作&#xff0c;首先需要完成开发工具DevEco Studio的下载与安装以及环境配置。 进入DevEco Studio 工具下载官网&#xff1a;https://developer.harmonyos.com/cn/develop/deveco-stu…

经典滑动窗口试题(二)

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 文章目录 一、水果成篮1、题目讲解2、讲解算法思路3、代码实现 二、找到字符串中所有字母异位词1、题目…

距离向量路由协议——IGRP和EIGRP

IGRP-内部网关路由协议 IGRP&#xff08;Interior Gateway Routing Protocol&#xff0c;内部网关路由协议&#xff09;是一种动态距离向量路由协议&#xff0c;它是Cisco公司在20世纪80年代中期设计的&#xff0c;是Cisco专用路由协议。目前在Cisco高版本的IOS已经对IGRP不提…

免费查找文献期刊数据论文网站

文章目录&#xff1a; 一&#xff1a;文献期刊 1.网站 2.镜像 3.搜索 4.检索 5.图书馆 6.学校 7.论文 8.导航 9.模板格式 10.翻译 二&#xff1a;数据 一&#xff1a;文献期刊 1.网站 中国知网 维普 IData sci-hub&#xff1a;Sci-Hub: 将知识带给每个人、S…

交叉编译

1. 交叉开发 交叉编译&#xff1a; 在电脑把程序编写 编译 调试好 再下载到嵌入式产品中运行 编译&#xff1a; gcc 之前编译环境和运行环境是一样的 交叉编译&#xff1a; 编译 把编译代码和运行分开 编译代码在虚拟机中 运行…

BGP基础配置

EBGP是AS之间 IBGP是AS内 R1-R2是EBGP,R4-R5是EBGP R2-R3-R4是IBGP 第一步基础配置&#xff1a;IP地址 [r1-GigabitEthernet0/0/0]ip ad 12.0.0.1 24 [r1-LoopBack0]ip ad 1.1.1.1 32 [r2-GigabitEthernet0/0/0]ip ad 12.0.0.2 24 [r2-LoopBack0]ip ad 2.2.2.2 32 [r2-Loop…