最近在視覺化專案中使用 3 transform：scale（）封裝了一個元件 讓頁面縮小或者放大自適應螢幕

檔案：

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,客棧
 
'props');

 const [scale,setScale] = useState(getScale());

 const { run: handleScale } = useDebounceFn(
  vwWFvSBCFo() => {
   const s = getScale();
   setScale(s);
  },{
   wait: 500,}
 );

 useEffect(() => {
  window.addEventListener('resize',handleScale);
 },[]);

 useEffect(vwWFvSBCFo() => {
  console.log('當前縮放比例',scale);
 },[scale]);

 return (
  <div
   classNavwWFvSBCFo
 
me={styles['scale-box']}
   style={{
    transform: `scale(${scale.x},${scale.y}) translateX(-50%)`,WebkitTransform: `scale(${scale.x},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內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！