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

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

原创最新推荐文章于 2024-01-05 09:38:09 发布 · 4.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端

ERROR | BUG 专栏收录该内容

11 篇文章

订阅专栏

原因

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

解决

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

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

前后对比

修改前
修改后

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

等下吃什么？

关注关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

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

JackieDYH的博客

03-08

1081

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

Unity 2Dｒｐｇ

qq_41809086的博客

04-18

1167

乱七八糟的东西格子像素数格子像素点这里格子像素数是指这个格子有多少个像素素材处可以设置素材的格子像素数材料切割 single整体的，multiple多重组成的，plygon多边形。这里选择multiple，然后点击Sprite Editor 点击右上Slice，选择Type，Automatic，Automatic是自动切割，会帮你吧图形完整切割好，Grid by Cell Size是按照单元像素数切割，第三个不知道。这里使用Grid by Cell Size，设置像素点大小后，切割即可。 W

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

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

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....

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

HELLO WORD

05-15

4053

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

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

梓川枫的博客

09-08

858

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

百度地图中心点偏移-Javascript

weixin_40400844的博客

04-11

3009

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

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

qq_37295317的博客

05-13

4176

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

【Vue百度地图定位功能实现】：卫星图上的精准用户位置定位指南

Vue与百度地图定位功能概览在互联网技术日益成熟的今天，前端开发已成为构建互联网产品的关键环节。而当提到前端框架，Vue.js无疑在当今市场中占据了一席之地。Vue.js以其轻量级和灵活的特点，广泛应用于单页面...

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

this_ITBoy的博客

03-23

1189

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

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

贪吃ღ大魔王

05-28

1096

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

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

栀蒽coding_的博客

03-14

4748

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

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

xxaann的博客

01-17

8791

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

百度地图坐标偏移的纠正

最新发布

emoji111111的博客

01-05

1364

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

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

XFeng

10-18

1229

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

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

xiamg123的博客

05-27

2096

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

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

rpf1234的博客

07-26

1555

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

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

业余前端的职业经历

12-02

3754

碰见项目中如果有变大的需求同时要求原来的中心坐标点还是居于屏幕中心不发生偏移 // 创建 中心点 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

299

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...

百度地图新版本优化轨迹绘制功能

1. **问题反馈收集**：用户在使用过程中遇到的问题会被反馈到百度地图团队，这包括软件的bug、操作不便、功能缺失等。 2. **软件更新迭代**：针对收集到的问题，百度地图团队会进行代码的优化和功能更新，不断迭代...