如何解决页面整体使用transform scale后地图点位点击偏移错位问题，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
最近在可视化项目中使用 css3 transform：scale（）封装了一个组件 让页面缩小或者放大自适应屏幕
js文件：
计算
安全
数据库
网络和加速
企业服务
import React, { useState, useEffect } from 'react';
import { useDebounceFn } from 'ahooks';
import styles from './index.module.less';
export default ({ width, height, children }) => {
const getScale = () => {
const x = window.innerWidth / width;
const y = window.innerHeight / height;
return { x, y };
};
console.log(width, height, 'props');
const [scale, setScale] = useState(getScale());
const { run: handleScale } = useDebounceFn(
() => {
const s = getScale();
setScale(s);
},
{
wait: 500,
}
);
useEffect(() => {
window.addEventListener('resize', handleScale);
}, []);
useEffect(() => {
console.log('当前缩放比例', scale);
}, [scale]);
return (
<div
className={styles['scale-box']}
style={{
transform: `scale(${scale.x},${scale.y}) translateX(-50%)`,
WebkitTransform: `scale(${scale.x},${scale.y}) translateX(-50%)`,
width,
// minHeight: window.innerHeight,
}}
>
{children}
</div>
);
};css文件：
.scale-box {
position: absolute;
top: 0;
left: 50%;
transform-origin: 0 0;
transition: 0.3s;
}然后发现使用 transform：scale（）缩放后会导致高德地图的点位点击的时候会出现 点位偏移 错位的情况 找了很多方法 最后用 iframe 解决了
把地图单独封装一个组件 拿 iframe 去引入这个组件
<iframe
className="map_iframe"
width="808px"
height="953px"
src={`http://${window.location.host}/maprouter`}
frameBorder="0"看完上述内容，你们掌握如何解决页面整体使用transform scale后地图点位点击偏移错位问题的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
