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

*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下缩放位置偏移的问题相关推荐

基于vue+echarts 数据可视化大屏展示[附源码]
获取 ECharts 的路径有以下几种,请根据您的情况进行选择: 1) 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载,不同的打包下载应用于不同的开发者功能与体积的需求,或者您 ...
使用Vue实现数据可视化大屏功能(二)
引入数据大屏相关组件用Datav插件做大屏可视化的组件,官网地址 http://datav.jiaminghi.com/ ,整个组件库都是基于Vue React版本实现,主要用于构建大屏数据可视 ...
使用Vue实现数据可视化大屏功能(一)
导语现在在很多的工程项目中,都有有关于数据大屏相关的监控内容,这里我们就来看一下如何用Vue来搭建一个数据可视化大屏应用. 创建项目使用WebStorm工具创建一个Vue的项目.如下图所示 ...
三原县地图可视化大屏数据三原县地图.js
三原县地图可视化大屏数据前言可视化大屏数据在学习地图可视化数据的时候,发现在网上只能找到省.市.县的地图json数据,到县级别只能到县,数据却不能精确到镇.网上没有三原精确到镇的json数据,于 ...
Vue+ECharts实现可视化大屏
由于项目需要一个数据大屏页面,所以今天学习了vue结合echarts的图标绘制首先需要安装ECharts npm install echarts --save 因为只是在数据大屏页面绘制图表,所以我 ...
elementui的tree组件页面显示不出数据_只要10分钟，教你配置出炫酷的数据可视化大屏...
在电影<摩天营救>中,监控中心的全方位展示屏幕给人印象深刻.现在这种立体化大屏幕似乎成了好莱坞大片的标配.其实,这种逼格很高的镜头就是一个数据可视化大屏.随着社会信息化的高速增长,数据可视 ...
炫酷大屏demo_只要10分钟，教你配置出炫酷的数据可视化大屏
在电影<摩天营救>中,监控中心的全方位展示屏幕给人印象深刻.现在这种立体化大屏幕似乎成了好莱坞大片的标配.其实,这种逼格很高的镜头就是一个数据可视化大屏. 随着社会信息化的高速增长,数据可 ...
YYDatav的数据可视化大屏《精彩案例汇总》（PythonEcharts源码）
一. 资源下载 [1-10]套Python+Echarts数据可视化大屏案例(共10套)-企业管理文档类资源-CSDN下载第1篇https://yydatav.blog.csdn.net/articl ...
推荐三款高级可视化工具，解决90%的数据可视化大屏需求
对于数据分析师来说,可视化可能是最能表现自己工作价值的一个途径,因为领导喜欢看这种直观的.炫酷的.具有科技感的可视化大屏,我们也能把数据分析结果直接展示给领导,比一份纸面报告要强不知多少倍! 那么领导 ...

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

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

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

最新文章

热门文章