解决页面整体使用transform scale后高德地图点位点击偏移错位问题
更新时间:2022年1月12日 13:19 点击:1151 作者:外星人不带帽子
最近在可视化项目中使用 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内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://blog.csdn.net/weixin_55432205/article/details/122408
上一篇: 使用JS动态构建目录树
相关文章
- 这篇文章主要介绍了vue+高德地图实现地图搜索及点击定位操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-09
- 这篇文章主要介绍了React使用高德地图的实现示例(react-amap),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
- 思路其实没有那么复杂,把地图想成一个盒子容器,地图中心点想成盒子中心点;扎点在【地图中心点】不会动,当移动地图时,去获取【地图中心点】经纬度,设置某个位置的时候,将经纬度设置为【地图中心点】即可...2021-06-20
- 这篇文章主要介绍了Swift使用transform 实现重复平移动画效果,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-07-21
- 这篇文章主要介绍了微信小程序之高德地图多点路线规划过程示例详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-18
- 这篇文章主要介绍了Java环境下高德地图Api的使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-06-19
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
这篇文章主要介绍了Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-14- 近期在用vue做一个环保类的项目,要求使用高德地图,下面这篇文章主要给大家介绍了关于Vue接入高德地图的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下...2022-06-15
解决页面整体使用transform scale后高德地图点位点击偏移错位问题
这篇文章主要介绍了解决页面整体使用transformscale后高德地图点位点击偏移错位问题的方法,具有一定的参考价值,需要的小伙伴可以参考一下...2022-01-12uniapp开发安卓App实现高德地图路线规划导航功能的全过程
最近项目需要在APP内实现路线规划导航功能,直接打开高德地图进行导航,下面这篇文章主要给大家介绍了关于利用uniapp开发安卓App实现高德地图路线规划导航功能的相关资料,需要的朋友可以参考下...2022-08-11- 这篇文章主要为大家详细介绍了vue如何使用原生高德地图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助...2022-02-28
touchscale屏幕电子秤如何操作 touchscale屏幕电子秤怎么打开
touchscale屏幕电子秤怎么打开?touchscale屏幕电子秤是一款非常好用的称重软件,用户通过手机就可以称重一些比较轻的东西,帮助用户知道物体的详细重量,那么touchscale屏幕电子秤怎么打开?下面就让小编给大家介绍一下...2022-09-14