微信小程序 腾讯地图显示偏差问题解决


Posted in Javascript onJuly 27, 2019

背景

在小程序中使用map组件,可以调用腾讯地图的API,将一些固定的点标记到地图界面上,点的经纬度获取是通过android端百度地图API获取的,所以此时将这个位置点信息直接设置上去会出现偏差,而且偏差还比较大

小程序设置位置点

关于如何在map组件上设置位置点,详细请查看腾讯官方文档
首先看一下map组件:

<map id="map" longitude="113.324520" latitude="23.099994" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 300px;"></map>

其markers是需要设置在地图界面的位置点数组,数组中的元素就是一个对象。

markers: [{
   iconPath: "/resources/others.png",
   id: 0,
   latitude: 23.099994,
   longitude: 113.324520,
   width: 50,
   height: 50
  },
  iconPath: "/resources/others.png",
   id: 0,
   latitude: 23.094994,
   longitude: 113.424520,
   width: 50,
   height: 50
  }],

这里的latitude和longitude如果直接给其他地图定位的点,那么相同的这个点位置,在小程序中会出现偏差;

原因

小程序中的定位方式默认的是wgs84,而百度地图中使用的是BD09 ,还有gcj02。所以这里会出现偏差。

解决方案

使用离线的js库gcoord,将位置信息进行一次转换;

首先下载这个js库,放至某一个目录下,我这里是utils下

在需要的界面导入

import gcoord from '../../../utils/gcoord.js'

调用转换函数

var result = gcoord.transform(
       [resArr[i].JD, resArr[i].WD],  // 经纬度坐标
       gcoord.BD09,         // 当前坐标系(百度)
       gcoord.GCJ02);

这里在小程序中修改为gcj02,国测数据,因此转为gcj02;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
csdn 论坛技术区平均给分功能
Nov 07 Javascript
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
Mar 21 Javascript
jQuery+css+html实现页面遮罩弹出框
Mar 21 Javascript
Jquery getJSON方法详细分析
Dec 26 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
May 31 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
vue如何从接口请求数据
Jun 22 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
详解Next.js页面渲染的优化方案
Jan 27 Javascript
javascript实现点亮灯泡特效示例
Oct 15 Javascript
React如何创建组件
Jun 27 Javascript
基于layPage插件实现两种分页方式浅析
Jul 27 #Javascript
基于ssm框架实现layui分页效果
Jul 27 #Javascript
layUI实现前端分页和后端分页
Jul 27 #Javascript
layui实现数据分页功能(ajax异步)
Jul 27 #Javascript
layui实现数据表格table分页功能(ajax异步)
Jul 27 #Javascript
layui实现数据分页功能
Jul 27 #Javascript
layUI实现列表查询功能
Jul 27 #Javascript
You might like
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
Smarty3配置及入门语法
2017/02/22 PHP
jQuery.extend 函数详解
2012/02/03 Javascript
javascript淡入淡出效果的实现思路
2012/03/31 Javascript
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
超赞的jQuery图片滑块动画特效代码汇总
2016/01/25 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
2017/02/16 Javascript
基于AGS JS开发自定义贴图图层
2017/03/31 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
2018/02/21 Javascript
vue页面离开后执行函数的实例
2018/03/13 Javascript
七行JSON代码把你的网站变成移动应用过程详解
2019/07/09 Javascript
vue 实现单选框设置默认选中值
2019/11/07 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
给Python中的MySQLdb模块添加超时功能的教程
2015/05/05 Python
Python+Opencv识别两张相似图片
2020/03/23 Python
python数据类型_字符串常用操作(详解)
2017/05/30 Python
Python基于identicon库创建类似Github上用的头像功能
2017/09/25 Python
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
Python接口测试环境搭建过程详解
2020/06/29 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
HTML5 weui使用笔记
2019/11/21 HTML / CSS
eharmony澳大利亚:网上约会服务
2020/02/29 全球购物
服装设计师职业生涯规划范文
2014/02/28 职场文书
同学聚会主持词
2014/03/18 职场文书
2014年寒假社会实践活动心得体会
2014/04/07 职场文书
学生保证书范文
2014/04/28 职场文书
詹天佑教学反思
2014/04/30 职场文书
2015年酒店工作总结范文
2015/04/07 职场文书
2015年宣传思想工作总结
2015/05/22 职场文书
不同意离婚代理词
2015/05/23 职场文书
社区志愿者服务心得体会
2016/01/22 职场文书
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python