vue内解决可视化大屏内百度地图在css transform下缩放位置偏移的问题

原创已于 2022-08-09 16:39:43 修改 · 8.3k 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #css3 #javascript

于 2022-04-21 09:44:18 首次发布

本文讲述了在Vue开发可视化大屏时，如何修复百度地图在CSS transform缩放下视角偏移的问题，涉及transform-origin调整、计算缩放中心点以及CSS布局优化的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

*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导致的问题，已解决。

注：高德地图我也有使用，但是出现的问题比百度少点，用以上方法也是可以解决的