热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

html百度地图中心点不正确,关于网页调用百度地图定位不准的问题?

请按照如下步骤排查你的代码:确保你的运行环境正常(直接使用百度地图看定位是否准确)以及代码没有基本逻辑错误使用百度坐标拾取器拾取你的目标位置,同时输出你代码里获取的坐

请按照如下步骤排查你的代码:确保你的运行环境正常(直接使用百度地图看定位是否准确)以及代码没有基本逻辑错误

使用百度坐标拾取器拾取你的目标位置,同时输出你代码里获取的坐标,两相比较排查错误

考虑使用BMap.Convertor()进行坐标转换(参见下文第一种方式)

下面是关于这个问题的一些延伸

设备获取坐标转换到map后不准确的原因:首先由于国家的保密政策,真实地理坐标是无法获取的,你所能得到的坐标都是经过加密插件(国家要求)出来的,国内的这套加密后的坐标系统被称为火星坐标系

然后我们需要明白的是,这个火星坐标在调用第三方地图进行绘制的时候是需要进行坐标转换的,这是因为不同的地图服务提供方有着其自己的坐标解析方式甚至是自己的坐标系,所以通过GPS设备获取的坐标需要经过所使用地图服务的转换才能正确定位

如此我们就能得到解决思路:第一种方式为调用浏览器自身接口(NavigatorGeolocation.geolocation)后,再调用第三方map服务(百度地图等)提供的转换接口Convertor()转换坐标,最后进行绘制

第二种方式为使用第三方map服务提供的经过封装的定位API,一般都能做到获取位置后直接进行绘制(注意需要设置偏移量进行偏移校准,官网示例都有的)

相关案例关键代码:

我一般在项目里使用高德地图和百度地图,以此为例:第一种方式+百度地图:

//绘制

initBMap(BMap,position) {

let coords = position.coords;

let ggPoint = new BMap.Point(coords.longitude,coords.latitude);

//地图初始化

let bm = new BMap.Map("map");

bm.centerAndZoom(ggPoint, 18);

bm.addControl(new BMap.NavigationControl());

setTimeout(()=>{

let cOnvertor= new BMap.Convertor();

let pointArr = [];

pointArr.push(ggPoint);

convertor.translate(pointArr, 1, 5, data => {

if(data.status === 0) {

let marker = new BMap.Marker(data.points[0]);

bm.addOverlay(marker);

let label = new BMap.Label("您的位置",{offset:new BMap.Size(20,-10)});

marker.setLabel(label); //添加百度label

bm.setCenter(data.points[0]);

}

})

}, 1000);

}第二种方式+高德地图:

//解析定位结果

onComplete(data) {

var str=['定位成功'];

str.push('经度:' + data.position.getLng());

str.push('纬度:' + data.position.getLat());

if(data.accuracy){

str.push('精度:' + data.accuracy + ' 米');

}//如为IP精确定位结果则没有精度信息

str.push('是否经过偏移:' + (data.isConverted ? '是' : '否'));

document.getElementById('tip').innerHTML = str.join('');

}

//解析定位错误信息

onError(data) {

document.getElementById('tip').innerHTML = '定位失败';

}

initAMap(AMap) {

let amap = new AMap.Map('map', {

resizeEnable: true,

});

amap.plugin(["AMap.ToolBar"],()=>{

amap.addControl(new AMap.ToolBar());

});

amap.plugin('AMap.Geolocation',()=>{

let geolocation = new AMap.Geolocation({

enableHighAccuracy: true,//是否使用高精度定位,默认:true

timeout: 10000,          //超过10秒后停止定位,默认:无穷大

buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)

zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false

buttonPosition:'RB'

});

amap.addControl(geolocation);

geolocation.getCurrentPosition();

AMap.event.addListener(geolocation, 'complete', this.onComplete);//返回定位信息

AMap.event.addListener(geolocation, 'error', this.onError);      //返回定位出错信息

});

}

补充说明:

上面的代码仅仅提供解决思路,请勿直接copy,善用API:关于坐标系加密的官方解释:百度地图--使用须知、高德地图常见问题--坐标转换

第三方地图封装后的地理位置获取API:百度地图、高德地图

原生坐标转换为第三方地图坐标示例接口:百度地图、高德地图

That's all...



推荐阅读
  • 模板引擎StringTemplate的使用方法和特点
    本文介绍了模板引擎StringTemplate的使用方法和特点,包括强制Model和View的分离、Lazy-Evaluation、Recursive enable等。同时,还介绍了StringTemplate语法中的属性和普通字符的使用方法,并提供了向模板填充属性的示例代码。 ... [详细]
  • 本文介绍了在处理不规则数据时如何使用Python自动提取文本中的时间日期,包括使用dateutil.parser模块统一日期字符串格式和使用datefinder模块提取日期。同时,还介绍了一段使用正则表达式的代码,可以支持中文日期和一些特殊的时间识别,例如'2012年12月12日'、'3小时前'、'在2012/12/13哈哈'等。 ... [详细]
  • OpenMap教程4 – 图层概述
    本文介绍了OpenMap教程4中关于地图图层的内容,包括将ShapeLayer添加到MapBean中的方法,OpenMap支持的图层类型以及使用BufferedLayer创建图像的MapBean。此外,还介绍了Layer背景标志的作用和OMGraphicHandlerLayer的基础层类。 ... [详细]
  • 本文介绍了利用ARMA模型对平稳非白噪声序列进行建模的步骤及代码实现。首先对观察值序列进行样本自相关系数和样本偏自相关系数的计算,然后根据这些系数的性质选择适当的ARMA模型进行拟合,并估计模型中的位置参数。接着进行模型的有效性检验,如果不通过则重新选择模型再拟合,如果通过则进行模型优化。最后利用拟合模型预测序列的未来走势。文章还介绍了绘制时序图、平稳性检验、白噪声检验、确定ARMA阶数和预测未来走势的代码实现。 ... [详细]
  • 微软头条实习生分享深度学习自学指南
    本文介绍了一位微软头条实习生自学深度学习的经验分享,包括学习资源推荐、重要基础知识的学习要点等。作者强调了学好Python和数学基础的重要性,并提供了一些建议。 ... [详细]
  • 如何自行分析定位SAP BSP错误
    The“BSPtag”Imentionedintheblogtitlemeansforexamplethetagchtmlb:configCelleratorbelowwhichi ... [详细]
  • YOLOv7基于自己的数据集从零构建模型完整训练、推理计算超详细教程
    本文介绍了关于人工智能、神经网络和深度学习的知识点,并提供了YOLOv7基于自己的数据集从零构建模型完整训练、推理计算的详细教程。文章还提到了郑州最低生活保障的话题。对于从事目标检测任务的人来说,YOLO是一个熟悉的模型。文章还提到了yolov4和yolov6的相关内容,以及选择模型的优化思路。 ... [详细]
  • 向QTextEdit拖放文件的方法及实现步骤
    本文介绍了在使用QTextEdit时如何实现拖放文件的功能,包括相关的方法和实现步骤。通过重写dragEnterEvent和dropEvent函数,并结合QMimeData和QUrl等类,可以轻松实现向QTextEdit拖放文件的功能。详细的代码实现和说明可以参考本文提供的示例代码。 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ... [详细]
  • Java容器中的compareto方法排序原理解析
    本文从源码解析Java容器中的compareto方法的排序原理,讲解了在使用数组存储数据时的限制以及存储效率的问题。同时提到了Redis的五大数据结构和list、set等知识点,回忆了作者大学时代的Java学习经历。文章以作者做的思维导图作为目录,展示了整个讲解过程。 ... [详细]
  • JavaSE笔试题-接口、抽象类、多态等问题解答
    本文解答了JavaSE笔试题中关于接口、抽象类、多态等问题。包括Math类的取整数方法、接口是否可继承、抽象类是否可实现接口、抽象类是否可继承具体类、抽象类中是否可以有静态main方法等问题。同时介绍了面向对象的特征,以及Java中实现多态的机制。 ... [详细]
  • 自动轮播,反转播放的ViewPagerAdapter的使用方法和效果展示
    本文介绍了如何使用自动轮播、反转播放的ViewPagerAdapter,并展示了其效果。该ViewPagerAdapter支持无限循环、触摸暂停、切换缩放等功能。同时提供了使用GIF.gif的示例和github地址。通过LoopFragmentPagerAdapter类的getActualCount、getActualItem和getActualPagerTitle方法可以实现自定义的循环效果和标题展示。 ... [详细]
  • 本文介绍了Swing组件的用法,重点讲解了图标接口的定义和创建方法。图标接口用来将图标与各种组件相关联,可以是简单的绘画或使用磁盘上的GIF格式图像。文章详细介绍了图标接口的属性和绘制方法,并给出了一个菱形图标的实现示例。该示例可以配置图标的尺寸、颜色和填充状态。 ... [详细]
  • [echarts] 同指标对比柱状图相关的知识介绍及应用示例
    本文由编程笔记小编为大家整理,主要介绍了echarts同指标对比柱状图相关的知识,包括对比课程通过率最高的8个课程和最低的8个课程以及全校的平均通过率。文章提供了一个应用示例,展示了如何使用echarts制作同指标对比柱状图,并对代码进行了详细解释和说明。该示例可以帮助读者更好地理解和应用echarts。 ... [详细]
author-avatar
赵lamarta
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有