解決頁面整體使用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)文章
document.getElementById為空或不是對象的解決方法
document.getElementById為空或不是對象的解決方法,一般情況下注意先內(nèi)容后js.2010-01-01小程序:授權(quán)、登錄、session_key、unionId的詳解
這篇文章主要介紹了小程序:授權(quán)、登錄、session_key、unionId的詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05微信小程序基于picker實現(xiàn)級聯(lián)菜單
這篇文章主要為大家詳細(xì)介紹了微信小程序基于picker實現(xiàn)級聯(lián)菜單,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-02-02如何用JavaScript學(xué)習(xí)算法復(fù)雜度
這篇文章主要介紹了如何用JavaScript學(xué)習(xí)算法復(fù)雜度,對算法感興趣的同學(xué),一定要看一下2021-04-04