关于vue使用baidu-map根据经纬度定位还是存在偏移的问题

最新推荐文章于 2023-09-22 18:20:54 发布
最新推荐文章于 2023-09-22 18:20:54 发布
阅读量2.3k 收藏
点赞数
分类专栏： vue 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46827289/article/details/127233113
版权

首先总结一下我出现偏移的原因我认为是，在地图的相关属性（比如说center，zoom等等）还未来得及赋值时，地图组件就已经开始初始化了，尽管我给了这些属性初始值，还是会有这个问题，我只能理解为地图加载的速度比我初始值加载的速度还要快些

思路：如果你的情况和我下面的不一样，那我就说下思路。通过v-if来控制地图组件的出现，尽可能让地图组件在它的相关属性都加载完成之后再出现。比如说你的center是通过请求接口数据来赋值的，那你就在请求接口数据给center赋值之后，再让v-if里的值为true，这样应该就没问题了。如果理解到了就可以不用看下面的代码了

先上我之前的代码

 我的地图代码是在一个表单里的，这个表单被封装成了一个组件，在需要的时候才会调用，如果你是我和一样的情况，那就在控件里加一个v-if

 这个zhanshi变量的默认值为false，然后当我调用这个组件时，如下图

在子组件通过props属性接收这个值

 然后通过watch监控，当这个属性值发生变化时，证明我在调用这个组件了，这个时候才让zhanshi = true，这时候你和地图相关的属性早就已经加载完了(比如center，zoom等等)，这时候再显示地图就不会存在偏移了

 

小鱼啦啦~
关注
专栏目录
关于Vue使用百度地图定位踩坑
Deku_Ln的博客
04-17 2569
因为有一个项目需要使用百度地图，所以再次说一下自己的踩坑历程。 由于Vue是单页面的，所以按需加载是最后的方法，百度也提供好了供我们使用的组件，只需要 npm install vue-baidu-map --save 就可以了。根据自己的需求可以在全局引用或者局部引用。 全局的话就在main.js中 import BaiduMap from 'vue-baidu-map' ...
vue之 vue-baidu-map 百度地图定位不准确有偏差的解决方法
追梦猪的博客
05-31 8335
vue环境下使用百度地图定位发现，地图定位不准确，有偏差，带红叉的是我们赋值的没有转换坐标的定位，对号是我们转换了坐标以后的定位，相对来说转换的坐标是符合我们的定位要求的，为什么会出现这样的差别呢，那先来看看坐标的种类：目前国内主要有以下三种坐标系：WGS84：为一种大地坐标系，也是...
vue使用百度地图，打开弹窗中心点偏移至左上角问题及解决
平平无奇的小菜鸡
11-01 744
vue使用百度地图，打开弹窗中心点偏移至左上角问题及解决 场景描述： 我是在element 弹窗里引用的vue百度地图，第一次进来打开弹窗，地图加载中心点位置是正确的，但是关闭弹窗后再次打开后就出现了问题，中心点位置出现在左上角的位置 图片描述： 定位正确图： 定位错误图 产生原因：百度上找的 主要是因为百度地图的渲染在模态框出来之前，此时模态框还未渲染完成，地图的相对定位就会造成偏差。 解决：使用setTimeout 延迟加载百度地图 editRow (row) { this.DialogVisab
VUE之 VUE-BAIDU-MAP 百度地图定位不准确有偏差的解决方法
qq_44710145的博客
09-12 2258
摘要于：qq_38705449原创文章
vue 百度地图纠偏 经纬度偏差、根据经纬度返回地址、关键字检索等信息
weixin_44167504的博客
12-13 2009
vue 百度地图纠偏 1、https://www.codeprj.com/blog/ad60761.html
【vue 使用 vue-baidu-map 地图 el-scrollbar 中嵌套百度地图出现缩放偏移量】
最新发布
qq_46648526的博客
09-22 599
vue el-scrollbar +百度地图。
Vue项目大屏可视化适配 transform+解决高德地图经纬度偏移
qq_45642765的博客
07-27 4963
vue js大屏适配 transform 方法+解决高德地图经纬度偏移问题
解决navigator.geolocation.getCurrentPosition 百度地图定位不准的问题
sxtysjzx0606的博客
09-05 1万+
最近在做Vue项目中定位时，发现定位总有偏差，查阅资料后发现用navigator.geolocation.getCurrentPosition取到的经纬度属于WGS84坐标，并不能直接用在百度地图的 构建map的point中，需要做转换。 转换前代码（贴上主要代码）： navigator.geolocation.getCurrentPosition((position) => { ...
vue 引用百度地图插件 Vue Baidu Map
yuenandehutu的博客
03-01 2万+
插件：Vue Baidu Map 安装：npm install vue-baidu-map --save 难点： 1：地图的引用 2：地图上标记点的画法 3：消息窗体的自定义画法 4：自带的点显示的窗体的屏蔽 全局注册： import Vue from 'vue' import BaiduMap from 'vue-baidu-map' ​ Vue.use(BaiduMap, {...
vue实现百度地图H5 标注平移动画实现
qq_46027468的博客
09-01 677
index.html中引入 <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=秘钥"></script> <script type="text/javascript" src="http://mapopen.bj.bcebos.com/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js">&
vue-baidu-map 进入页面自动定位的解决方案(推荐)
08-27
主要介绍了vue-baidu-map 进入页面自动定位的解决方案,需要的朋友可以参考下
baidu_map_demo
01-06
在进行百度地图开发时，我们可能会遇到一个问题，即输入的经纬度在地图上显示的位置与实际位置存在偏移。这个问题主要是由于中国的地理位置信息采取了一种特殊的加密算法，以保护国家安全，这种现象被称为“偏移矫正...
百度地图、高德地图和腾讯地图定位不准确的解决方案
lishuaihao的博客
08-08 1万+
这个定位值得是获取自身位置。
vue H5使用百度地图，高德地图，腾讯地图，企业微信js-sdk分享一些经验以及遇到的问题
m0_65878076的博客
03-12 3438
实现类似钉钉打卡获取当前定位得方法，分享一下自己在获取当前定位得时候遇到得一些问题。
百度地图处理地图缩放出现中心点偏移的bug
TianYu0-0的博客
03-24 3825
百度地图处理地图缩放出现中心点偏移的bug 问题 百度地图的未放在标准文档流中，地图缩放出现中心点偏移。 出现原因 百度地图加载的位置因为定位等原因，与整个html 页面产生了不同步滚动的问题。百度地图的缩放是基于body层的，如果body层有滚动条，并且不在最顶端，在当前位置插入了百度地图，也就是出现该问题时的状态，这个时候滚轮缩放就会产生偏移。 解决方案 主要是通过监听到缩放开始事件来获取缩放前的中心点经纬度，然后监听到缩放结束事件后，将地图重新位移到缩放之前的中心点处。 vue代码如下： <t
【快速上手】Vue如何通过百度地图插件——vue-baidu-map插件实现地图轨迹与路线等功能
weixin_43746402的博客
06-28 1万+
现在挺多博主都做的挺完整的地图文档使用介绍等等，但有时候我们接触去选择自己做的效果时候还是会遇到很多不同的问题。这里我把我自己个人在各个检索下的文章，做出自己想要的效果地图，基础地图功能＋路线+运动轨迹的过程介绍一下对应组件使用与注意事项。
vue-baidu-map  使用("踩坑")心得
热门推荐
每天都记录一点点！
01-16 5万+
    最近在用vue开发应用，要用到百度地图，之前用jquery有用过百度地图的JS SDK，基本功能都有实现过，但是到vue上就必须得自己封装插件了，当然晚上有的自己肯定是不想再去造轮子的，除非这轮子不合适，一搜果然与现成的，传送门在这：https://dafrok.github.io/vue-baidu-map/#/zh/index,点击进去就是使用文档，但是有很多坑，这里说一下，免得大家重...
百度地图API（5）：地图第二次加载异常，错位，不全解决方案
Liao Tuo
02-16 6261
第二次进入时显示不全 - 出现问题的原因：你要确保dom创建后且处于显示状态（即display不能为none）才能再次初始化地图，否则会出现你这种情况。 - 解决办法：页面加载完后延时200毫秒左右再初始化地图。 代码对比如下：//错误代码:在js里面直接调用initMap()方法. initMap(); //改正后代码:设置延时，再初始化 setTimeout(function(){in
vue-baidu-map 经纬度定位
07-28
对于在Vue中使用百度地图进行经纬度定位，你可以按照以下步骤进行操作： 1. 首先，在你的Vue项目中安装`vue-baidu-map`插件。可以通过以下命令来安装： ```bash npm install vue-baidu-map --save ``` 2. 在你的Vue项目的`main.js`文件中引入百度地图插件，并注册到Vue实例中： ```javascript import Vue from 'vue' import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { ak: 'your_baidu_map_api_key' // 替换为你自己的百度地图API密钥 }) ``` 3. 在你需要使用地图的组件中，使用`<baidu-map>`标签创建地图容器，并设置相应的属性： ```vue <template> <div> <baidu-map :center="center" :zoom="zoom" style="height: 400px;"></baidu-map> </div> </template> <script> export default { data() { return { center: [经度, 纬度], // 设置地图中心点的经纬度 zoom: 缩放级别 // 设置地图缩放级别，可选，默认为12 } } } </script> ``` 这样，你就可以在Vue项目中使用百度地图进行经纬度定位了。记得替换代码中的`your_baidu_map_api_key`为你自己的百度地图API密钥，并根据需要设置地图的中心点经纬度和缩放级别。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值