解决navigator.geolocation.getCurrentPosition 百度地图定位不准的问题-程序员宅基地

技术标签: 地图  

最近在做Vue项目中定位时,发现定位总有偏差,查阅资料后发现用navigator.geolocation.getCurrentPosition取到的经纬度属于WGS84坐标,并不能直接用在百度地图的 构建map的point中,需要做转换。
转换前代码(贴上主要代码):

navigator.geolocation.getCurrentPosition((position) => {
      const lat = position.coords.latitude;
      const lng = position.coords.longitude;
      const point = new BMap.Point(lng, lat);
      const geo = new BMap.Geocoder();
      geo.getLocation(point, (res) => {
        const addComp = res.addressComponents;
        const cityName = addComp.city.replace('市', '');
      });
});

从代码中可以看到得到 lat和lng然后直接创建了百度的point 坐标点,但其实这里的经纬度是不准的,下面直接附上转换代码

navigator.geolocation.getCurrentPosition((position) => {
    let lat = position.coords.latitude;
    let lng = position.coords.longitude;
    const pointBak = new BMap.Point(lng, lat);
    const convertor = new BMap.Convertor();
    convertor.translate([pointBak], 1, 5,function(resPoint) {
        if(resPoint && resPoint.points && resPoint.points.length>0){
            lng = resPoint.points[0].lng;
            lat = resPoint.points[0].lat;
        }
        const point = new BMap.Point(lng, lat);
        const geo = new BMap.Geocoder();
        geo.getLocation(point, (res) => {

        });
    });
});

可以看到通过convertor.translate([pointBak], 1, 5,function(resPoint) 将不准确的经纬度信息做了转换,转换之后再创建百度point就是准确的了

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/xqhys/article/details/106720385

智能推荐

input框 下面 紧跟着div弹出层,js取top left数值[实例]_input触发弹出层-程序员宅基地

文章浏览阅读3.6k次。var setSearchFlag; function showSearch(obj){ clearSearchFlag(); var w3c=(document.getElementById)? true:false;//w3c 标准 var ns6=(w3c && (navigator.appName=="Netscape"))? true: false;//Netsca_input触发弹出层

K折交叉验证(StratifiedKFold与KFold比较)_四折交叉验证-程序员宅基地

文章浏览阅读5.6k次,点赞7次,收藏63次。文章目录一、交叉验证二、K折交叉验证KFold()方法StratifiedKFold()方法一、交叉验证交叉验证的基本思想是把在某种意义下将原始数据(dataset)进行分组,一部分做为训练集(train set),另一部分做为验证集(validation set or test set),首先用训练集对分类器进行训练,再利用验证集来测试训练得到的模型(model),以此来做为评价分类器的性能指标。–来自百科二、K折交叉验证KFold()方法KFold(): KFold 将所有的样例划分为 _四折交叉验证

怎么让联想计算机升级,如何刷bios,教您联想电脑如何刷bios-程序员宅基地

文章浏览阅读9k次。我们都知道刷bios的时候,在整个升级过程中都需要谨慎,不然很容易搞坏主板,就会得不偿失,那么如果使用联想电脑的用户该怎么去刷bios呢?虽然使用联想的用户很多,但是会的没几个,下面,小编就来跟大家讲讲联想电脑如何刷bios。刷bios有什么用?这是一些用户都想要知道了,其实我们的电脑想要增加新的选项,就像软件更新一样增加功能,那么该怎么去刷bios呢?很多的用户都不知道该怎么去操作呢?下面,小编..._联想主板刷bios教程

DWM之创建窗口_获取dwm窗口-程序员宅基地

文章浏览阅读996次。Win7与Xp,直观上最大的区别便是界面上的改变了,win7拥有着华丽的玻璃界面.今天就写一下关于这方面的文章.毫无疑问,一切都是微软提供,以下一切内容参考于MSDN中http://msdn.microsoft.com/en-us/library/windows/desktop/aa969540(v=vs.85).aspx这篇文章.先给出代码.再做解释: 1 .3_获取dwm窗口

p2p网贷平台设计简析-程序员宅基地

文章浏览阅读308次。以我之前主持开发的一个商业产品:p2p网贷为例进行分析。整个的概况,可以参见:www.huixinp2p.com(目的只会技术交流)界面可以直接参考前期博客:http://www.cnblogs.com/shenliang123/p/3435427.html其中涉及到的部分web安全的解决可以参考最新博客:http://www.cnblogs.com/shenliang123/p/3835..._p2p网贷系统平台设计简析

python3爬虫——requests(一)_明朝那些事爬虫代码-程序员宅基地

文章浏览阅读256次。Requests:让http服务人类虽然Python标准库中的urllib模块包含了平常我们使用的大多数功能,但是它的API使用起来让人感觉不太好,而Request自称”HTTP for Humans“,说明使用更简单方便。Request唯一的非转基因的Python库,人类可以安全享有,Request继承了urllib的所有特性,Request支持HTTP链接保持和连接池,支持使用coo..._明朝那些事爬虫代码

随便推点

CCS5导入工程时出错:Issues that may require your attention were encountered while importing the projects-程序员宅基地

文章浏览阅读2.4w次,点赞10次,收藏27次。1.出错CCS5.5.0导入工程(Import CCS Eclispse Project)时出错:Issues that may require your attention were encountered while importing the projects ,如下图:2.原因是由于文件夹名(例如f28335_Sci_Update_Flash_first)和文件夹中的工程名

Android4.0 Toast显示问题分析_安卓4.0不支持uni.showtoast-程序员宅基地

文章浏览阅读8.9k次,点赞3次,收藏4次。在修复RUI桌面在4.0系统下的提示信息不完善的Bug过程的一些思路与大家分享一下。Bug描述:RUI在2.2的系统点击推荐图标下载后,就会进入下载队列中下载,如果再次点击相同的图标就会使用Toast提示“**已经在下载队列中”。但是在4.0的系统就会出现异常,第二次点击相同的推荐图标时没有出现Toast提示。相关源码:public static void showMe_安卓4.0不支持uni.showtoast

服务器无法与DeviceNetBT_Tcpip_{670E1543-79C1-485C-9B4B-835CE3BA37B3}传输相绑定-程序员宅基地

文章浏览阅读3.3k次。在运行 Windows Server 2003 的计算机上,您可以根据需要对所选的客户端关闭 TCP/IP 上的 NetBIOS (NetBT)。如果您希望只使用 DNS 在一台指定计算机(该计算机用于您网络中的专门角色或安全角色)上提供名称注册和解析,则您可以选择为该计算机上安装的一个或所有网络适配器关闭 NetBT 服务。配置要关闭 WINS/NetBT..._服务器无法与传输绑定,因为网络上的另一部计算机具有相同的名称。服务器无法启动

NYOJ 118 修路方案(次小生成树)-程序员宅基地

文章浏览阅读806次。修路方案时间限制:3000 ms | 内存限制:65535 KB难度:5描述南将军率领着许多部队,它们分别驻扎在N个不同的城市里,这些城市分别编号1~N,由于交通不太便利,南将军准备修路。现在已经知道哪些城市之间可以修路,如果修路,花费是多少。现在,军师小工已经找到了一种修路的方案,能够使各个城市都联通起来,而且花费最少。但是,南

【期末复习】微机原理与接口技术_己知 8254 的端口地址为 3000h、3004h3008h 和 30bh外接时钟频率为 2mh2-程序员宅基地

文章浏览阅读5w次,点赞134次,收藏961次。知识重点整理第一章 输入/输出系统1.接口电路的作用和基本功能接口电路是CPU与外设交换信息的中转站。接口电路应具备的功能为:数据缓冲功能、联络功能、寻址功能、数据转换功能、中断管理功能。2.端口的概念和分类端口是接口电路中能与CPU直接进行信息交换的寄存器,即I/O端口寄存器。在接口电路中,按端口寄存器存放信息的物理意义可划分为数据端口、控制端口和状态端口:数据端..._己知 8254 的端口地址为 3000h、3004h3008h 和 30bh外接时钟频率为 2mh2,利用 825

2D转换,动画,转化-程序员宅基地

文章浏览阅读236次,点赞5次,收藏3次。CSS3中的2D转换和动画是现代网页设计中非常重要的技术,它们可以让网页元素以更加生动、动态的方式展示在用户面前。总结:CSS3中的2D转换和动画为网页设计提供了强大的功能,可以轻松实现各种动态效果。使用`transform: rotate()`可以实现元素的旋转效果。使用`transform: translate()`可以实现元素的平移效果。使用`transform: scale()`可以实现元素的缩放效果。使用`transform: skew()`可以实现元素的倾斜效果。1. 旋转(rotate)

推荐文章

热门文章

相关标签