react

先判断缩放方式，获取屏幕可视化宽高及页面定义的宽高：

讯享网

const windowSize = ({ 
     zoomStyle, width, height }, innerWidth, innerHeight) => { 
    let widthPre = width; let heightPre = height; let scaleX = 1; let scaleY = 1; if (zoomStyle === 'screenFull') { 
    scaleX = Math.floor((innerWidth / width) * 10000) / 10000; scaleY = Math.floor((innerHeight / height) * 10000) / 10000; widthPre = innerWidth; heightPre = innerHeight; } if (zoomStyle === 'widthFull') { 
    scaleX = Math.floor((innerWidth / width) * 10000) / 10000; scaleY = scaleX; widthPre = innerWidth; heightPre = scaleX * height; } if (zoomStyle === 'heightFull') { 
    scaleY = Math.floor((innerHeight / height) * 10000) / 10000; scaleX = scaleY; heightPre = innerHeight; widthPre = scaleY * width; } return { 
    innerWidth, innerHeight, widthPre, heightPre, scaleX, scaleY }; } // export const iframeEngineSize = ({ zoomStyle, width, height }, innerWidth, innerHeight) => windowSize({ zoomStyle, width, height }, innerWidth, innerHeight); export const previewWindowSize = ({ 
     zoomStyle, width, height }) => { 
    const innerWidth = window.innerWidth || document.documentElement.clientWidth; const innerHeight = window.innerHeight || document.documentElement.clientHeight; return windowSize({ 
    zoomStyle, width, height }, innerWidth, innerHeight); }; 在地图渲染文件中引入文件进行使用： function reverseWidthHeight() { 
    const egismapEle = document.getElementById('id');//获取地图dom const { 
    screenInfoData: { 
    zoomStyle, width: sw, height: sh } } = bigScreen; //这块视情况修改 const coordinate = { 
    x: egismapEle.offsetLeft, y: egismapEle.offsetTop } // 方法：反向缩放 let w = width; let h = height; let newScaleX = 1; let newScaleY = 1; let newTop = coordinate.y; let newLeft = coordinate.x; const { 
    scaleX, scaleY } = previewWindowSize({ 
    zoomStyle, width: sw, height: sh }); w *= scaleX; h *= scaleY; newScaleX = Math.floor((1 / scaleX) * 100) / 100; newScaleY = Math.floor((1 / scaleY) * 100) / 100; newLeft = ((width - w) / 2); newTop = ((height - h) / 2); const divStyle = { 
    width: w, height: h, transform: `scaleX(${ 
     newScaleX}) scaleY(${ 
     newScaleY})`, position: 'absolute', top: `${ 
     newTop}px`, left: `${ 
     newLeft}px` }; setEgismapStyle(divStyle); // 这里是将样式存一下 } 初始化加载页面时调用这个方法，然后在样式渲染时加上egismapStyle即可。 

vue

// 反缩放去掉自适应-解决地图自适应时marker、hover错位问题

讯享网resetMapSize() { 
    let screenWidth = document.body.clientWidth || document.documentElement.clientWidth; let screenHeight = document.body.clientHeight || document.documentElement.clientHeight; let width = 1920; let height = 1080; let xScale = screenWidth / width; let yScale = screenHeight / height; let w = width; let h = height; w *= xScale; h *= yScale; let egismapEle = document.getElementById("egismap"); const coordinate = { 
    x: egismapEle.offsetLeft, y: egismapEle.offsetTop, }; let newTop = coordinate.y; let newLeft = coordinate.x; newLeft = (width - w) / 2; newTop = (height - h) / 2; const divStyle = { 
    width: `${ 
     w}px`, height: `${ 
     h}px`, transform: `scale(${ 
     1 / xScale},${ 
     1 / yScale})`, position: "absolute", top: `${ 
     newTop}px`, left: `${ 
     newLeft}px`, }; this.egismapSty = divStyle; }