页面整体使用transform scale 后 高德地图点位点击偏移 错位问题

Posted 外星人不带帽子

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了页面整体使用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 后 高德地图点位点击偏移 错位问题的主要内容,如果未能解决你的问题,请参考以下文章

css中设置transform:scale后,之前设置为fixed的div就都不会固定在屏幕上了,如何解决?

我可以在 CSS 中的 Transform:Scale 函数中使用 Calc 吗?

文献阅读:DeepNet: Scaling Transformers to 1,000 Layers

css3 scale

transform scale 放大图片时,图片变模糊

css zoom和transform:scale的区别