admin 管理员组文章数量: 1184232
vue内解决可视化大屏内百度地图在css transform下缩放位置偏移的问题*
最近在写可视化大屏的时候发现使用百度地图，在缩放的缩放的时候视角总是往红色框位置缩放，并不在鼠标位置进行视角缩放，查询了很多资料后，试了很多方法都没能解决，后来自己排除出问题并解决，记录一下：
其实导致的这样的原因在，我在写大屏适配的时候，直接监听了窗口变化，然后计算之后用transform:scale(),进行了缩放：
代码如上
我发现是我设置了transform-origin: 0 0;transform: translate(-50%, -50%)；这句话导致了地图的视角的偏移，去掉之后就可以了，但是去掉之后肯定适应上就要重新做了，所以我就换了一种写法，因为我们要用translate(-50%, -50%)的目的就是要将视图一直能够在我们的窗口中央，那我就实时计算一下left,top的值，除去一半后，就在中间了。
getScale() {
/* 页面初始化及缩放大小 */
let ww = window.innerWidth / 1920 ;
let wh = window.innerHeight / 1080 ;
return ww < wh ? ww : wh;
},
// 修复地图缩放中心点偏移的问题
let scale = this.getScale();
_em.style.transform = `scale(${scale}) translateZ(0) translate3d(0, 0, 0)`;
_em.style.left = `${(window.innerWidth - 1920 * scale) / 2}px`;
_em.style.top = `${(window.innerHeight - 1080 * scale) / 2}px`;
做到这里之后，好像问题已经解决了，整体的缩放视角上在页面刚打开的时候好像没有问题了，也能在正常的位置进行缩放，但是后来我发现页面缩放之后，触发了scale()计算，视角又开始偏移了，然后继续修改代码，直接上最终代码：
// 直接去掉left，top的计算，只使用scale()
this.$nextTick(() => {
setTimeout(() => {
let scale = this.getScale();
var _em = document.getElementById("visualmain");
_em.style.width = this.width + "px";
_em.style.height = this.height + "px";
// 修复地图缩放中心点偏移的问题
_em.style.transform = `scale(${scale}) translateZ(0) translate3d(0, 0, 0)`;
// _em.style.left = `${(window.innerWidth - this.width * scale) / 2}px`;
// _em.style.top = `${(window.innerHeight - this.height * scale) / 2}px`;
}, 500);
});
直接用css 在他的父级设计flex属性，然后通过flex属性让其居中在中心位置，由于父盒子定位导致盒子脱离标准流W3C， 硬改样式治本,将地图模块的定位由absolute改成fixed,解决百度地图因为父级设置的absolute导致脱离标准流问题，然后将 transform-origin: 0 0；也改成了 transform-origin: center center;
.visualmainBody {
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.visualmain {
width: 1920px;
height: 1080px;
transform-origin: center center;
position: fixed;
transition: 0.2s;
}
至此由css样式translate，scale导致的问题，已解决。
注：高德地图我也有使用，但是出现的问题比百度少点，用以上方法也是可以解决的
版权声明：本文标题：vue内解决可视化大屏内百度地图在css transform下缩放位置偏移的问题 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1754941210a3052584.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论