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


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 相关文章推荐
更正确的asp冒泡排序
May 24 Javascript
Javascript模块模式分析
May 16 Javascript
window.requestAnimationFrame是什么意思,怎么用
Jan 13 Javascript
EditPlus注册码生成器(js代码实现)
Mar 25 Javascript
JS中的三个循环小结
Jun 20 Javascript
详解webpack分离css单独打包
Jun 21 Javascript
JS非空验证及邮箱验证的实例
Aug 11 Javascript
Vue精简版风格概述
Jan 30 Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
Jul 29 Javascript
PHP 502bad gateway原因及解决方案
Nov 13 Javascript
element 动态合并表格的步骤
Dec 31 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如何写APP接口详解
2016/08/23 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
javascript 兼容FF的onmouseenter和onmouseleave的代码
2008/07/19 Javascript
JavaScript 核心参考教程 内置对象
2009/10/13 Javascript
JSQL  一个 web DB 的封装
2010/05/05 Javascript
在JavaScript中获取请求的URL参数
2010/12/22 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
2013/09/18 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
js判断复选框是否选中及选中个数的实现代码
2016/05/30 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
JS前端笔试题分析
2016/12/19 Javascript
JavaScript之实现一个简单的Vue示例
2019/01/17 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
2019/05/03 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
2019/05/23 Javascript
vue中组件通信的八种方式(值得收藏!)
2019/08/09 Javascript
vue h5移动端禁止缩放代码
2019/10/28 Javascript
js实现消灭星星(web简易版)
2020/03/24 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
2020/08/07 Javascript
从零学python系列之数据处理编程实例(二)
2014/05/22 Python
Python计算三维矢量幅度的方法
2015/06/15 Python
Python+django实现文件上传
2016/01/17 Python
Python实现重建二叉树的三种方法详解
2018/06/23 Python
Python面向对象程序设计之继承与多继承用法分析
2018/07/13 Python
pymongo中group by的操作方法教程
2019/03/22 Python
关于pytorch中全连接神经网络搭建两种模式详解
2020/01/14 Python
TensorFlow通过文件名/文件夹名获取标签,并加入队列的实现
2020/02/17 Python
python函数中将变量名转换成字符串实例
2020/05/11 Python
python连接手机自动搜集蚂蚁森林能量的实现代码
2021/02/24 Python
浅谈基于HTML5的在线视频播放方案
2016/02/18 HTML / CSS
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
宝信软件JAVA工程师面试经历
2012/08/19 面试题
小学优秀辅导员事迹材料
2014/05/11 职场文书