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('當(dāng)前縮放比例', 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;
}

然后發(fā)現(xiàn)使用 transform：scale（）縮放后會(huì)導(dǎo)致高德地圖的點(diǎn)位點(diǎn)擊的時(shí)候會(huì)出現(xiàn) 點(diǎn)位偏移錯(cuò)位的情況找了很多方法最后用 iframe 解決了

把地圖單獨(dú)封裝一個(gè)組件拿 iframe 去引入這個(gè)組件

? ? <iframe
? ? ? ?className="map_iframe"
? ? ? ?width="808px"
? ? ? ?height="953px"
? ? ? ?src={`http://${window.location.host}/maprouter`}
? ? ? ?frameBorder="0"

到此這篇關(guān)于解決頁面整體使用transform scale后高德地圖點(diǎn)位點(diǎn)擊偏移錯(cuò)位問題的文章就介紹到這了,更多相關(guān)面整體使用transform scale內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！