解決頁面整體使用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內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Echats圖表大屏自適應的實現方法
- Vue實現大屏頁面的屏幕自適應
- 基於CSS實現MaterialUI按鈕點擊動畫並封裝成 React 組件
- react實現自定義拖拽hook
- jQuery實現移動端懸浮拖動效果