解決頁面整體使用transform scale后高德地圖點位點擊偏移錯位問題
更新時間：2022年01月12日 11:26:58 作者：外星人不帶帽子 ?
這篇文章主要介紹了解決頁面整體使用transform scale后高德地圖點位點擊偏移錯位問題的方法，具有一定的參考價值，需要的小伙伴可以參考一下
最近在可視化項目中使用 css3 transform：scale（）封裝了一個組件 讓頁面縮小或者放大自適應(yīng)屏幕
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('當(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（）縮放后會導(dǎo)致高德地圖的點位點擊的時候會出現(xiàn) 點位偏移 錯位的情況 找了很多方法 最后用 iframe 解決了
把地圖單獨封裝一個組件 拿 iframe 去引入這個組件
? ? <iframe
? ? ? ?className="map_iframe"
? ? ? ?width="808px"
? ? ? ?height="953px"
? ? ? ?src={`http://${window.location.host}/maprouter`}
? ? ? ?frameBorder="0"到此這篇關(guān)于解決頁面整體使用transform scale后高德地圖點位點擊偏移錯位問題的文章就介紹到這了,更多相關(guān)面整體使用transform scale內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
以下幾種方法都是復(fù)制一個新的對象或者數(shù)組，但是如果直接通過parent【iframe情況】的方式去父窗口的對象的時候會有問題，感興趣的朋友可以了解下2013-09-09
這篇文章主要介紹了JS中正則表達式要注意lastIndex屬性,需要的朋友可以參考下2017-08-08
uniapp實現(xiàn)全局設(shè)置字體大小(小中大的字體切換)
隨著UniApp的流行,越來越多的開發(fā)者選擇使用它來構(gòu)建跨平臺應(yīng)用程序,下面這篇文章主要給大家介紹了關(guān)于uniapp實現(xiàn)全局設(shè)置字體大小(小中大的字體切換)的相關(guān)資料,需要的朋友可以參考下2023-06-06
Bootstrap Modal對話框如何在關(guān)閉時觸發(fā)事件
這篇文章主要為大家詳細介紹了Bootstrap Modal對話框如何在關(guān)閉時觸發(fā)事件,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
js內(nèi)存泄漏的含義就是當(dāng)已經(jīng)不需要某塊內(nèi)存時這塊內(nèi)存還存在著,垃圾回收機制就是間歇的不定期的尋找到不再使用的變量,并釋放掉它們所指向的內(nèi)存,這篇文章主要給大家介紹了關(guān)于js內(nèi)存泄漏場景、如何監(jiān)控及分析的相關(guān)資料,需要的朋友可以參考下2021-11-11
這篇文章主要為大家詳細介紹了JavaScript仿flash遮罩動畫效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-06-06
這篇文章主要介紹了市面上短視頻(douyin)"去水印"的工具原來是這樣實現(xiàn)的,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-03-03
這篇文章主要介紹了JS仿hao123導(dǎo)航頁面圖片輪播效果，代碼簡單易懂，非常不錯，具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧2016-09-09
這篇文章主要介紹了由?JavaScript?的?with?引發(fā)的探索，js?的?with?是為對象訪問提供命名空間式的訪問方式，with?創(chuàng)建一個對象的命名空間，在這個命名空間內(nèi)你可以直接訪問對象的屬性，而不需要通過對象來訪問，下面一起來了解更多詳細內(nèi)容吧2022-01-01
javascript動態(tài)修改Li節(jié)點值的方法
這篇文章主要介紹了javascript動態(tài)修改Li節(jié)點值的方法,涉及針對li節(jié)點的操作技巧,非常具有實用價值,需要的朋友可以參考下2015-01-01