解决页面整体使用transform scale后高德地图点位点击偏移错位问题
更新时间:2022年01月12日 11:26:58 作者:外星人不带帽子
这篇文章主要介绍了解决页面整体使用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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
document.getElementById为空或不是对象的解决方法
document.getElementById为空或不是对象的解决方法,一般情况下注意先内容后js.2010-01-01小程序:授权、登录、session_key、unionId的详解
这篇文章主要介绍了小程序:授权、登录、session_key、unionId的详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-05-05
最新评论