当前仓库属于暂停状态,部分功能使用受限,详情请查阅 仓库状态说明
19 Star 213 Fork 53

gyy / vue-bmap-gl
暂停

 / 详情

自定义信息框体 屏幕大小改变之后位置显示不正确

已完成
创建于  
2021-07-28 09:26

f11之前
输入图片说明

f11之后(重新点击显示的位置正常)
输入图片说明

再次f11
输入图片说明

默认的信息框体不会出现这种情况,自定义信息框体有这个问题,移动地图可以恢复正常

代码
输入图片说明

输入图片说明

自定义信息框体的position会随屏幕大小改变 top和left在屏幕大小改变之后值发生变化
f11前
输入图片说明
f11后
输入图片说明
普通的信息框体不会随屏幕大小改变 top和left在屏幕大小改变值不变
输入图片说明
输入图片说明

评论 (26)

丿王小虎 创建了任务
丿王小虎 关联仓库设置为gyy/vue-bmap-gl
丿王小虎 修改了描述
丿王小虎 修改了描述
丿王小虎 修改了描述
丿王小虎 修改了描述
展开全部操作日志

我这测试了一波,没啥问题啊

这就有点尴尬了 为啥我写总有奇奇怪怪的问题 你测试又没有 我这边调f11 f12自定义信息框体都会偏移 但是移动地图又会恢复正确的位置

你的地图使用固定像素?固定像素我测试没问题 我用的vw vh会出现这种情况

我用的px,没用自适应,地图这块都是用的px,应该是你的自适应会自动变化,这个我就没法处理了

491639 guyangyang 1644548353 头像挂件 gyy 拥有者
回复 gyy 拥有者

对于PC的地图来讲,没必要用vw,直接用px就行,最多根据情况写两个到三个自适应就好了

信息框体那个使用自适应没有问题

那就地图这块BUG了,信息框用的transform还好,百度地图相关的都是用的px作为单位,你项目调整下吧

项目需求需要地图铺满宽度和高度还要在大屏使用 所以还是需要自适应 之前用的mapv+vue-baidu-map 最近在尝试各种地图组件

地图铺满很简单啊,

html,body{width:100%, height:100%}
.map-container{width:100%, height:100%}

我项目里用的是百分比 测试用了vw vh而已

我看了你的源码 应该是f11 f12这些事件没去监听没有重新执行calcPosition这个方法导致的 或者是resize这个方法没有调用?

我不会专门监听这两个事件,监听的肯定是地图的resize事件,毕竟按道理来讲你全屏必定会触发resize

按刚刚贴的图 resize触发了 不然top和left是不会改变的 就是calcPosition计算位置有问题

这个计算是地图底层的,具体我也没细看它的实现

估计是pointToOverlayPixel这个获取错误要么就是调错方法了 resize里赋值top和left为初始值这个弹框位置显示不会有问题

目前是使用px是正常,应该是内部没有适配其他的单位,这块基础地图有些诡异的BUG很正常,他们也一直在修复各种奇葩BUG

我调了下源码 pointToOverlayPixel获取的值有问题 在调用f11全屏和f12调试器获取的值不对 但是我拖动调试器获取的值是对的
这是我f11 pixel的值 第一个pixel是获取正确的值 后面两个的f11前后的值
输入图片说明

这个就没有办法了,百度这块的BUG暂时没法处理

丿王小虎 修改了描述
丿王小虎 修改了描述

今天测试了一下原生百度的自定义信息框体和pointToOverlayPixel这个方法 监听resize pointToOverlayPixel的值是相同的 为什么你的自定义信息框体同一坐标获取的值不一样呢 resize做了什么别的操作吗 源码好像也只是计算了位置赋值而已

我啥时都没干。。。你这个问题我暂时还没时间处理

我项目少上班没事干 帮你找找原因哈哈

麻烦你找下,修复下了,最近项目太忙了,除非特别严重的BUG,其他的暂时没精力搞了

解决了 具体什么原因我还没搞清楚 应该是文章里面说的自适应的问题 给你pullrequest了 看这篇文章解决的https://juejin.cn/post/6844903679087099912

如果通过延时可以解决,那就是事件触发时根本不是地图resize完全结束的时候,这个后面再细看百度的这块源码

丿王小虎 任务状态待办的 修改为已完成

登录 后才可以发表评论

状态
负责人
里程碑
Pull Requests
关联的 Pull Requests 被合并后可能会关闭此 issue
分支
开始日期   -   截止日期
-
置顶选项
优先级
参与者(2)
491639 guyangyang 1644548353
JavaScript
1
https://gitee.com/guyangyang/vue-bmap-gl.git
git@gitee.com:guyangyang/vue-bmap-gl.git
guyangyang
vue-bmap-gl
vue-bmap-gl

搜索帮助