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


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 相关文章推荐
window.location.hash 属性使用说明
Mar 20 Javascript
Bootstrap精简教程
Nov 27 Javascript
详解javascript跨浏览器事件处理程序
Mar 27 Javascript
jQuery调用Webservice传递json数组的方法
Aug 06 Javascript
Vue如何实现组件的源码解析
Jun 08 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
AngularJS实现自定义指令及指令配置项的方法
Nov 20 Javascript
JavaScript框架Angular和React深度对比
Nov 20 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
Feb 26 Javascript
详解element-ui中form验证杂记
Mar 04 Javascript
Vuejs通过拖动改变元素宽度实现自适应
Sep 02 Javascript
解决Antd 里面的select 选择框联动触发的问题
Oct 24 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
《星际争霸II》全新指挥官斯台特曼现已上线
2020/03/08 星际争霸
超外差式晶体管收音机的组装与统调
2021/03/01 无线电
PHP+APACHE实现用户论证的方法
2006/10/09 PHP
php使用array_rand()函数从数组中随机选择一个或多个元素
2014/04/28 PHP
PHP程序员必须清楚的问题汇总
2014/12/18 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
详解thinkphp中的volist标签
2018/01/15 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
2009/07/18 Javascript
JavaScript将取代AppleScript?
2014/09/18 Javascript
jQuery 处理页面的事件详解
2015/01/20 Javascript
Javascript闭包用法实例分析
2015/01/23 Javascript
js实现按钮颜色渐变动画效果
2015/08/20 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
2016/02/14 Javascript
ionic实现可滑动的tab选项卡切换效果
2020/04/15 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
jQuery插件ajaxFileUpload使用详解
2017/01/10 Javascript
Angular1.x自定义指令实例详解
2017/03/01 Javascript
基于对象合并功能的实现示例
2017/10/10 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
Python编程之微信推送模板消息功能示例
2017/08/21 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
python获取栅格点和面值的实现
2020/03/10 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
TensorFlow中如何确定张量的形状实例
2020/06/23 Python
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
制作部班长职位说明书
2014/02/26 职场文书
多媒体教室标语
2014/06/26 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
第28个世界无烟日活动总结
2015/02/10 职场文书
硕士学位申请报告
2015/05/15 职场文书