页面整体使用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 吗?