Bug 百度地图centerAndZoom设置中心点后，中心点偏移

最新推荐文章于 2024-01-05 09:38:09 发布

等下吃什么？

最新推荐文章于 2024-01-05 09:38:09 发布

阅读量4.5k

点赞数 1

分类专栏： ERROR | BUG 文章标签：前端

本文链接：https://blog.csdn.net/weixin_44240581/article/details/114683396

版权

ERROR | BUG 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

原因

因为容器在隐藏和显示之间切换时，容器还没创建好，宽高为0，这时设置中心点就会是在左上角

解决

定时器setTimeout，延时设置中心点

setTimeout(() => {
      window.map.centerAndZoom(new BMap.Point(lng, lat), 15); // 初始化地图,设置中心点坐标和地图级
}, 300);

前后对比

修改前
修改后

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

等下吃什么？

关注关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

前端常用属性知识点--文档

JackieDYH的博客

03-08

966

清除浮动带来的影响--.clearfix .clearfix{ *zoom:1; } .clearfix::after{ content: ""; display: block; clear:both; visibility: hidden; height: 0; 弹性盒子-flex 1）弹性盒子——css3中新增的布局方式。是一种当屏幕大小、设...

使用百度地图 中心点和坐标偏移的问题

Beam

07-01

1万+

百度地图的引入在index.html引入百度地图开发包如下： <!DOCTYPE html> <html> …… <body> <div id="app"></div> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2....

1 条评论您还未登录，请先登录后发表或查看评论

百度地图初始化中心点偏移问题

HELLO WORD

05-15

3909

最近做的项目涉及到了很多数据可视化的操作，所以用到了大量的ECharts以及百度地图，记录一下前两天刚刚遇到的一个问题。一个地图展示页面，其中包含一个tab切，展现数据的两种展现形式，（实际情况是tab切页面中还有子tab切，但这不是关键），两个地图实例都设置了相同的中心点point，但是当tab切换到第二个地图时，出现了中心点偏移。出现这种现象的原因是，页面初始化时，两个地图都会...

解决百度地图加载中心点偏移问题

梓川枫的博客

09-08

620

怀疑是页面加载时，百度地图先一步加载，这导致样式部分未能跟上。给百度地图加一个外框时，加载地图总统是偏移。设置一个三秒的延迟加载，稳定解决问题。

百度地图中心点偏移-Javascript

weixin_40400844的博客

04-11

2836

百度地图中心点偏移-Javascript功能介绍：整体思路：具体实现：一、变更代码执行顺序：二、map.panBy：功能介绍：本文记录了百度地图BMap实现中，出现中心点偏移问题解决方法，基于点聚合功能出现的问题。地图正常显示效果：地图实际显示效果：整体思路：原代码：注意：这里为了实现效果使用了原生js的代码直接控制display改变，实际应用中可能是jQuery的hide()、show()，vue中的v-if控制切换地图显隐。 <body> <div id="map"

百度地图缩放中心点偏移问题

qq_37295317的博客

05-13

3903

百度地图加载的位置因为定位等原因，与整个html 页面产生了不同步滚动的问题。导致此问题的主要原因就是地图加载位置的问题导致。百度地图的缩放是基于body层的，如果body层有滚动条，插入了百度地图，也就是出现该问题时的状态，这个时候滚轮缩放就会产生偏移。解决方法：监听缩放开始事件前的中心点经纬度，然后到缩放事件结束后，将地图重新位移到中心点处。需要添加的代码如下： ·1.将地图的中心点更改为给定的点。 map.panTo(point); 2.处理缩放事件。 /...

百度地图-鼠标滚轮缩放导致地图中心点偏移问题

栀蒽coding_的博客

03-14

4274

百度地图接入-鼠标滚轮滚动中心点偏移问题

Js_百度地图api的一个坑

S_gy_Zetrov的博客

03-09

5901

调用百度地图api时候标记的marker发飘的解决办法Js调用百度地图api的时候发现标记好的小红点并没有在地图中央显示前提：已经用map.centerAndZoom(point,xx);设置好中心点问题：页面加载出来并没有在显示小红点，相反，小红点飘到地图窗口的上边缘处，甚至看不到小红点了问题图例：解决：设置一个新点point_new，point_new的坐标比point更飘（如point在地图窗

百度云音视频直播全屏时与layer弹框冲突问题的解决

this_ITBoy的博客

03-23

1109

前段时间项目中做视频直播用到了百度云的音视频直播LSS，由于需求需要在pc端要加一些自定义的按钮，因此需要把百度云播放器放在页面弹框里面，而layer算是比较好用的一款弹框插件，做出的效果图如图：弹框下面还有截图的功能，截图是用H5的canvas能直接截取video标签里内容drawImage()方法，点击截图按钮效果如图：保存按钮直接上传到服务器，可以看到图一背景还引入了百度地图...

前端非框架类知识点汇总

weixin_46044936的博客

07-26

2542

html单词库 <link rel="stylesheet" href="css文件路径">css引入 <iframe src="danghang.html" width="100%" height="310px" frameborder="0"></iframe> 图片标签： img src="" title="" alt="" src属性是指图像文件路径 alt属性是在图片加载不出来时替换成文本 title属性是在鼠标悬停的时候显示 srcset属性是在不

一篇博文带你0基础 Html和css入门

贪吃ღ大魔王

05-28

1004

前端初学入门，找不到学习方向，不喜欢记笔记？没关系，这篇博文为你整理了详细的学习笔记汇总，欢迎收藏，喜欢的可以直接到博文尾处，免费下载md笔记哦~⭐⭐⭐ # Html5 网站: 1、网站的建立流程???? 注册域名租用空间网站建设确定网站的主题搜索资料规划网站制作页面 4.网站的推广 5.网站的维护 2、网页的组成及web标准???? 结构：网页的结构部分 xhtml或html 表现：网页的样式css 行为：网页要实现的功能JS HTML 超文本标记语言 XHTML 可扩

vue调用百度地图动态修改中心点

xxaann的博客

01-17

8641

初始化地图 initialApi () { var map = new BMap.Map("allmap") //初始化地图时中心点的位置为深圳 var point = new BMap.Point('深圳') //var point = new BMap.Point(116.3972282409668,39.90960456049752) ...

百度地图坐标偏移的纠正

最新发布

emoji111111的博客

01-05

1082

【代码】百度地图手动设置中心点。

解决ios 开发百度地图设置中心点偏移无效的问题

XFeng

10-18

1156

[self.view addSubView:self.mapView]---------->修改为 sellf.view = self.mapView

百度地图设置地图启动中心点

xiamg123的博客

05-27

2011

适合于百度地图开发的初学者。

百度地图初始化中心偏移的解决办法及问题原因分析

rpf1234的博客

07-26

1421

1.原因分析 百度地图加载时页面标签的宽高都还没有加载完成，地图的标签宽高都是0，所以地图的中心会移到div的左上角 2 解决办法推迟初始化地图的时间 <script> import BMap from 'BMap' export default { components: { }, mounted() { setTimeout(() => { this.baiduMap() }, 100) }, m

百度地图重新设置中心坐标点 (容器元素宽高发生变化的时候)

业余前端的职业经历

12-02

3547

碰见项目中如果有变大的需求同时要求原来的中心坐标点还是居于屏幕中心不发生偏移 // 创建 中心点 var center = new BMap.Point(116.404, 39.915); map.setCenter(center); 但是这样还是有问题如果原来是个小元素后面有变大了其实上面的设置还不会生效的需要我们重新渲染下地图才可以 var map = new BMap.Map('allmap'); // 创建Map实例 ...

baidu-map

weixin_30726161的博客

11-30

274

1 var map = new BMap.Map("wcp"); // 创建Map实例 2 map.centerAndZoom(new BMap.Point(9.1234695911407, 45.4779927836), 11); // 初始化地图,设置中心点坐标和地图级别 3 //添加地图类型控件 4 map.addControl(new BMap.MapTypeContro...

baidu-map加上滚轮缩放后偏离中心点

08-10

百度地图在使用滚轮缩放时可能会导致地图中心点偏移的。这个问题是于百度地图默认位是取浏览器文档对象scrollTop=0的位置，并以body中心为中点。如果页面或弹窗中出现滚动条，地图的中心位置实际上是有偏移的，偏移的距离就是滚动条滚动的距离。因此，在缩放时会出现中心点偏移的情况。为了解决这个问题，可以采取以下几种方法： 1.禁止滚轮缩放并添加缩放控件。禁止鼠标滚轮缩放可以通过调用`disableScrollWheelZoom()`方法实现。同时，可以添加百度地图的缩放控件和平移缩放控件，以便用户可以手动控制地图的缩放效果。 2.调节滚动条位置。在弹窗打开时，检查滚动条位置是否在最顶部，如果不在的话，调整到最顶部。然后在弹窗关闭时，恢复到最初的位置。这样可以确保地图加载时滚动条处于正确的位置，避免中心点偏移的问题。另外，还可以处理缩放事件。可以在缩放开始和缩放结束时分别记录和恢复地图的中心点经度和纬度，以确保缩放后地图仍然以正确的中心点为中心显示。综上所述，以上方法可以解决百度地图滚轮缩放后偏离中心点的问题。123 #### 引用[.reference_title] - *1* [百度地图-鼠标滚轮缩放导致地图中心点偏移问题](https://blog.csdn.net/zengdaping/article/details/123472305)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item] - *2* [百度地图处理地图缩放出现中心点偏移的bug](https://blog.csdn.net/tianyu0_0/article/details/115176475)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item] - *3* [百度地图缩放中心点偏移问题](https://blog.csdn.net/qq_37295317/article/details/124755636)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item] [ .reference_list ]