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


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 相关文章推荐
css样式标签和js语法属性区别
Nov 06 Javascript
Javascript加载速度慢的解决方案
Mar 11 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
Apr 11 Javascript
JavaScript数组去重的3种方法和代码实例
Jul 01 Javascript
javascript实现可键盘控制的抽奖系统
Mar 10 Javascript
Bootstrap select多选下拉框实现代码
Dec 23 Javascript
jQuery实现用户输入自动完成功能
Feb 13 Javascript
vue v-on监听事件详解
May 17 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
详解auto-vue-file:一个自动创建vue组件的包
Apr 26 Javascript
jquery将json转为数据字典的实例代码
Oct 11 jQuery
vue 动态组件用法示例小结
Mar 06 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
PHP中is_dir()函数使用指南
2015/05/08 PHP
PHP简单获取多个checkbox值的方法
2016/06/13 PHP
深入浅析PHP的session反序列化漏洞问题
2017/06/15 PHP
PHP创建自己的Composer包方法
2018/04/09 PHP
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
Bootstrap每天必学之警告框插件
2016/04/26 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
利用纯Vue.js构建Bootstrap组件
2016/11/03 Javascript
AngularJS ui-router (嵌套路由)实例
2017/03/10 Javascript
JS中跳出循环的示例代码
2017/09/14 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
2018/11/06 Javascript
小程序实现抽奖动画
2020/04/16 Javascript
利用Dectorator分模块存储Vuex状态的实现
2019/02/05 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
2019/08/12 Javascript
原生js实现无缝轮播图效果
2021/01/28 Javascript
[01:10]DOTA2 Supermajor:英雄,由我们见证
2018/05/14 DOTA
Python内置函数delattr的具体用法
2017/11/23 Python
Python多线程扫描端口代码示例
2018/02/09 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
amazeui模态框弹出后立马消失并刷新页面
2020/08/19 HTML / CSS
为世界各地的女性设计和生产时尚服装:ROMWE
2016/09/17 全球购物
纽约JewelryAffairs珠宝店:精细金银时尚首饰
2017/02/05 全球购物
菲律宾领先的在线时尚商店:Zalora菲律宾
2018/02/08 全球购物
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
SHEIN美国:购买时髦的女性服装
2020/12/02 全球购物
团购业务员岗位职责
2014/03/15 职场文书
数控机床专业自荐信
2014/05/19 职场文书
个人综合鉴定材料
2014/05/23 职场文书
2013年最新自荐信范文
2014/06/23 职场文书
班级团队活动方案
2014/08/14 职场文书
个人总结与自我评价
2014/09/18 职场文书
实习指导教师评语
2014/12/30 职场文书
年终工作总结范文
2019/06/20 职场文书