javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > 面整体使用transform scale

解决页面整体使用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后高德地图点位点击偏移错位问题的文章就介绍到这了,更多相关面整体使用transform scale内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

阅读全文