如何解决页面整体使用transform scale后地图点位点击偏移错位问题

如何解决页面整体使用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后地图点位点击偏移错位问题的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注编程网精选频道，感谢各位的阅读！