微信小程序获取定位显示在百度地图上位置出现偏差
项目场景:
背景:
- 微信小程序端获取手机定位坐标,以及正确展示位置
- 通过详细地址解析为定位坐标显示在小程序端以及PC后台
- 小程序获取的地理坐标与百度地图坐标相互转化
相关知识
目前国内主要有以下三种坐标系:
- WGS84:为一种大地坐标系,也是目前广泛使用的GPS全球卫星定位系统使用的坐标系。
- GCJ02:又称火星坐标系,是由中国国家测绘局制订的地理信息系统的坐标系统。由WGS84坐标系经加密后的坐标系。
- 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(){}
})
- 小程序端使用百度地图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 () {}})
- 小程序端获取的定位需要转化为百度系坐标用于后端展示,则需要通过一定的算法将
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}
- 直接上代码转化 调用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)},
})
相关文章:
微信小程序获取定位显示在百度地图上位置出现偏差
项目场景: 背景: 微信小程序端获取手机定位坐标,以及正确展示位置通过详细地址解析为定位坐标显示在小程序端以及PC后台小程序获取的地理坐标与百度地图坐标相互转化 相关知识 目前国内主要有以下三种坐标系: WGS84:…...
【LeetCode 0170】【哈希】两数之和(3) 数据结构设计
https://leetcode.com/problems/two-sum-iii-data-structure-design/ 描述 Design and implement a TwoSum class. It should support the following operations: add and find. add(input) – Add the number input to an internal data structure. find(value) – Find if …...
005、简单页面-容器组件
之——布局 目录 之——布局 杂谈 正文 1.布局基础知识 2.Column 3.Row 4.实践 杂谈 布局容器组件。 一个丰富的页面需要很多组件组成,那么,我们如何才能让这些组件有条不紊地在页面上布局呢?这就需要借助容器组件来实现。 容器组件是…...
stm32中断调用流程
USART1_IRQHandler(void)(中断服务函数) -> HAL_UART_IRQHandler(UART_HandleTypeDef *huart)(中断处理函数) -> UART_Receive_IT(UART_HandleTypeDef *huart) (接收函数) -> HAL_UART_RxCpltCallback(huart);(中断回调函数) HAL_UART_IRQHandler(UART_HandleTypeDef…...
18487.1 - 2015 电动汽车充电系统标准 第1部分 关键点梳理
一、部分知识介绍 1、连接方式 使用电缆和连接器将电动汽车接入电网(电源)的方法。 1.1、连接方式A 1.2、连接方式B 1.3、连接方式C 2、电动汽车控电设备 2.1、按照输出电压分类 1)交流 单相 220V,三相 380V. 2)…...
WPF实战项目十八(客户端):添加新增、查询、编辑功能
1、ToDoView.xmal添加引用,添加微软的行为类 xmlns:i"http://schemas.microsoft.com/xaml/behaviors" 2、给项目添加行为 <i:Interaction.Triggers><i:EventTrigger EventName"MouseLeftButtonUp"><i:InvokeCommandAction Com…...
职位招聘管理与推荐系统Python+Django网页界面+协同过滤推荐算法
一、介绍 职位招聘管理与推荐系统。本系统使用Python作为主要开发语言,以WEB网页平台的方式进行呈现。前端使用HTML、CSS、Ajax、BootStrap等技术,后端使用Django框架处理用户请求。 系统创新点:相对于传统的管理系统,本系统使用…...
C#文件流二进制文件的读写
目录 一、BinaryWriter类 二、BinaryReader类 三、示例 1.源码 2.生成效果 二进制文件的写入与读取主要是通过BinaryWriter类和BinaryReader类来实现的。 一、BinaryWriter类 BinaryWriter类以二进制形式将基元类型写入流,并支持用特定的编码写入字符串&#…...
如何正确选择爬虫采集接口和API?区别在哪里?
在信息时代,数据已经成为了一个国家、一个企业、一个个人最宝贵的资源。而爬虫采集接口则是获取这些数据的重要手段之一。本文将从以下八个方面进行详细讨论: 1.什么是爬虫采集接口? 2.爬虫采集接口的作用和意义是什么? 3.爬虫…...
k8s部署jenkins
1.先决条件 1.因为国内的容器镜像加速器无法实时更新docker hub上的镜像资源.所以可以自己进行jenkins的容器镜像创建,. 2.这里用到了storageClass k8s的动态制备.详情参考: k8s-StoargClass的使用-基于nfs-CSDN博客 3.安装docker服务.(用于构建docker image) 2.构建jenki…...
HTTP相关
HTTP 什么是http - 蘑菇声活 http特点 1.基于TCP协议之上的应用层协议 2.基于请求--响应 3.无状态(每次发送请求对服务端都是新的) 4.无/短连接(客户端不会一直跟服务端连接) http请求协议与响应协议 请求协议 请求首行&…...
Armv8.x和Armv9.x架构扩展简介
目录 一、概述 二、Armv8.x和Armv9.x是什么意思? 三、为什么我们需要.x扩展? 四、处理器实现...
node的proxy-server使用
代理服务器是一种常见的网络工具,可以用来隐藏客户端的真实IP地址,保护客户端的隐私,也可以用来绕过一些网络限制,访问被封锁的网站。在这篇博客文章中,我们将讲解代理服务器的API基本使用流程和思路,以及代…...
FO-like Transformation in QROM Oracle Cloning
参考文献: [RS91] Rackoff C, Simon D R. Non-interactive zero-knowledge proof of knowledge and chosen ciphertext attack[C]//Annual international cryptology conference. Berlin, Heidelberg: Springer Berlin Heidelberg, 1991: 433-444.[BR93] Bellare M…...
Redis - 多数据源切换
问题描述 最近遇到一个 Redis 多数据源切换问题,不过我这个没有那么动态切换需求,所以就写了一种比较硬编码的方式来做『切换』 其实大概的场景是这样的:不同的开发环境调用 db0、生产环境调用 db1,但是因为业务原因,…...
采集工具-免费采集器下载
在当今信息时代,互联网已成为人们获取信息的主要渠道之一。对于研究者和开发者来说,如何快速准确地采集整个网站数据是至关重要的一环。以下将从九个方面详细探讨这一问题。 确定采集目标 在着手采集之前,明确目标至关重要。这有助于确定采集…...
使用MD5当做文件的唯一标识,这样安全么?
使用MD5作为文件唯一标识符可靠么? 文章目录 使用MD5作为文件唯一标识符可靠么?什么是MD5?MD5的用途MD5作为文件唯一标识的优劣优势劣势 使用MD5作为文件唯一标识的建议其他文件标识算法结束语 什么是MD5? MD5(Messag…...
【算法通关村】链表基础经典问题解析
【算法通关村】链表基础&经典问题解析 一.什么是链表 链表是一种通过指针将多个节点串联在一起的线性结构,每一个节点(结点)都由两部分组成,一个是数据域(用来存储数据),一个是指针域&…...
【华为OD题库-056】矩阵元素的边界值-java
题目 给定一个N * M矩阵,请先找出M个该矩阵中每列元素的最大值,然后输出这M个值中的最小值 补充说明: N和M的取值范围均为: [0,100] 示例1: 输入: [[1,2],[3,4]] 输出: 3 说明: 第一列元素为:1和3,最大值为3 第二列元素为: 2和4,最…...
zabbix_sender——向zabbix交互的sdk
zabbix给我们提供了win32的交互方法。地址为src\zabbix_sender\win32\zabbix_sender.c zabbix_sender_send_values 函数声明为: int zabbix_sender_send_values(const char *address, unsigned short port, const char *source,const zabbix_sender_value_t *values...
[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?
🧠 智能合约中的数据是如何在区块链中保持一致的? 为什么所有区块链节点都能得出相同结果?合约调用这么复杂,状态真能保持一致吗?本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里…...
微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来,Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...
R语言AI模型部署方案:精准离线运行详解
R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...
理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端
🌟 什么是 MCP? 模型控制协议 (MCP) 是一种创新的协议,旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议,它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...
聊聊 Pulsar:Producer 源码解析
一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台,以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中,Producer(生产者) 是连接客户端应用与消息队列的第一步。生产者…...
系统设计 --- MongoDB亿级数据查询优化策略
系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log,共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题,不能使用ELK只能使用…...
12.找到字符串中所有字母异位词
🧠 题目解析 题目描述: 给定两个字符串 s 和 p,找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义: 若两个字符串包含的字符种类和出现次数完全相同,顺序无所谓,则互为…...
Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)
目录 一、👋🏻前言 二、😈sinx波动的基本原理 三、😈波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、🌊波动优化…...
【生成模型】视频生成论文调研
工作清单 上游应用方向:控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...
探索Selenium:自动化测试的神奇钥匙
目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...
