关于百度地图中心点在左上角的问题

最新推荐文章于 2024-06-17 18:02:18 发布
最新推荐文章于 2024-06-17 18:02:18 发布
阅读量5.1k 收藏
点赞数 2
分类专栏： js BMap 文章标签： js BMap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41612385/article/details/79352085
版权

本人小白

困扰我好几天的问题，没想到这么简单就能解决。。。。。

因为最开始包含地图的DIV是隐藏的状态，所以该DIV的宽高都为0，故中心也是(0, 0)

所以当包含地图的DIV由隐藏状态变为显示状态时，中心会出现在左上角

所以只需要在地图显示时再初始化地图即可

只需要在地图显示时再初始化地图即可
MayBeXY_
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
JavaScript引入百度地图标注点偏移左上角问题
Eliane_的博客
05-14 3274
在项目中引入了百度地图，运行是发现标注的位置发生了偏移，标注点在左上角（0，0）的位置 此时看不到标注点，拖动时可以看见。在网上各种百度，在JavaScript中加各种代码，都没有效果，但在一篇博客中看见有这么一段代码： var loadCount = 1; map.addEventListener("tilesloaded",function(){ if(loadCount == 1...
百度地图V3.5.0获取可视地图范围中心点、东北方、西南方（右上角、左下角）坐标
yangxf
07-08 4439
OnMapStatusChangeListener onMapStatusChangeListener=new OnMapStatusChangeListener(){                 @Override                 public void onMapStatusChange(MapStatus mapStatus) {
Vue集成 Vue Baidu Map 坐标在左上角问题解决方案
qq_37286668的博客
07-14 1276
百度地图加载出来的时候，地图中心点偏移到左上角。 主要是因为加载顺序的问题。地图的渲染在模态框出来之前，因此模态框还未渲染完成，地图的相对定位就会造成偏差。 解决的方法使用 setTimeout ；在模态框出来之后再加载地图，问题解决。 具体代码如下： show (params) { //模态框显示时调用的方法 let _this = this; this.showModal = true setTimeout(function () {
百度地图-鼠标滚轮缩放导致地图中心点偏移问题
栀蒽coding_的博客
03-14 4170
百度地图接入-鼠标滚轮滚动中心点偏移问题
echarts引入百度地图vue3（大屏项目中缩放点偏移到左上角，解决代码在最后）
最新发布
zsy1833579605的博客
06-17 407
实际开发中的问题，遇到了大屏做了自适应，为非标准文档流之后，在缩放时不是以鼠标当前位置缩放的，而是偏移到左上角。index.html 需要先在这个文件中引入百度的ak。mapStyle的json数据。
百度地图中心点跑到了左上角
如果没有_明天
08-02 2135
问： 地图中心点跑到左上角去了，怎么解决？   解： 这种问题通常是容器处于隐藏状态导致的，api会认为地图宽高为0。建议等待容器处于可见状态后再初始化地图。...
【web】百度地图中心点始终出现在左上角，或者灰蒙蒙的
CN_Anyoo的专栏
11-01 822
在使用弹窗显示地图的时候，地图的中心点会在网页的左上角 解决办法： 在弹窗的时候，shilihua
vue使用百度地图，打开弹窗中心点偏移至左上角问题及解决
平平无奇的小菜鸡
11-01 728
vue使用百度地图，打开弹窗中心点偏移至左上角问题及解决 场景描述： 我是在element 弹窗里引用的vue百度地图，第一次进来打开弹窗，地图加载中心点位置是正确的，但是关闭弹窗后再次打开后就出现了问题，中心点位置出现在左上角的位置 图片描述： 定位正确图： 定位错误图 产生原因：百度上找的 主要是因为百度地图的渲染在模态框出来之前，此时模态框还未渲染完成，地图的相对定位就会造成偏差。 解决：使用setTimeout 延迟加载百度地图 editRow (row) { this.DialogVisab
百度地图中心点偏移到左上角（0，0）解决方法
fgxs
05-09 3913
百度地图加载出来的时候，地图中心点偏移到左上角。 加载地图的div展示前，div为隐藏状态，但div显示的时候，地图相对页面的坐标发生偏移。（正常直接显示 不存在这个问题） 当展示div的时候，延迟加载百度地图 setTimeout(function () { map = new BMap.Map("MapMain", { enableMapC...
关于地图坐标不居中显示，显示在左上角的问题
shuai1999m的博客
03-27 1043
在使用百度地图javascript API时，出现地图坐标不居中，展示在左上角，出现情况：tab切换选中提车信息时 地图在切换到提车信息时才展示出来，，所以在这之前地图div长宽都是为0的情况，然后再切换到提车信息时，盒子展示，但地图在页面初始化的时候已经加载好了，所以很简单，在点击到提车信息时，在对地图进行一个初始化加载，然后就能完美解决问题 亲测！！！ ...
怎么让百度地图保持一个中心点
04-26
2. 在百度地图网页版中，可以使用鼠标右键拖动地图，将地图调整到需要的中心点，然后点击地图左上角的“设为中心点”按钮即可将该点设置为中心点。 以上是两种常见的设置百度地图中心点的方法，希望能够解决您的...
前端关于百度地图JavaScript Api 使用
ck2018182068的博客
10-31 3084
百度地图的用法以及一些小案例
百度地图中心偏移到左上角，地图有时能加载出来有时加载不出来
热门推荐
climber
05-13 1万+
在现在项目中使用到了百度地图： 1.订单起点设置为中心点 2.显示周围司机 在这个过程中遇到两个问题： 1、订单中心点左上角位置，网上查了很多资料，说是在div在隐藏的状态下创建BMap会出现这种情况，此时，默认为宽度和高度都为0，中心点自然就跑到左上角去了，网上 很多说了很多解决方案，map.centerAndZoom(point,15);            map.setCent
vue3中vue-baidu-map的中心点在左上角的问题
m0_66039084的博客
01-16 969
第一次点击出现的地图在中心标记，之后更换其他坐标点的时候，出现在左上角。
html地图中心位置偏移,解决百度地图中心偏移到左上角
weixin_29614223的博客
06-02 356
订单中心点左上角位置，网上查了很多资料，说是在div在隐藏的状态下创建BMap会出现这种情况，此时，默认为宽度和高度都为0，中心点自然就跑到左上角去了，网上很多说了很多解决方案，map.centerAndZoom(point,15); map.setCenter(point); 查看百度API还有panTo();等等一些方法，还是没有解决问题，...
vue使用百度地图中心点偏移到左边
xj152的博客
08-25 1136
写项目时碰到这个问题，不管怎么调整中心点的位置，总会偏移到左边 去掉地图的bm-view的定位，成功解决问题。
百度API地图的标注不是居中显示，而是显示在左上角是怎么回事？已解决！
hzhairuntao的博客
11-09 4318
在项目中引入了百度地图，运行是发现标注的位置发生了偏移？ 按道理是按照坐标定位的，为啥跑到左上角去了，刚开始百思不得其解。 废话不多说，直接上能够处理的代码。 加入这一行就可以了：map.panBy(580, 150); //map.panBy(580, 150); //第一个参数是宽度 //第二个参数是高度 //基本设置为你放 id = "allmap" 的div的一半，就居中了。...
如何将echarts关系图中心点定在左上角
05-27
要将Echarts关系图的中心点定在左上角，您可以通过以下步骤实现： 1.在Echarts配置项中，设置关系图的布局方式为“力导向布局（force）”。 2.通过设置布局参数，将节点的初始位置设置为左上角。 下面是一个示例配置，可以将关系图的中心点定位在左上角： ``` option = { // 设置关系图的布局方式为力导向布局 layout: 'force', // 设置力导向布局的相关参数 force: { // 初始节点位置的设置 initLayout: 'circular', center: [ '10%', '10%' ], gravity: 0.1, edgeLength: 50, repulsion: 1000 }, // 其他配置项 ... }; ``` 在上面的示例中，我们通过设置`center`参数将节点的初始位置设定在了左上角。您可以根据需要调整该参数的数值，以得到最佳的效果。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值