解決頁面整體使用transform scale后高德地圖點(diǎn)位點(diǎn)擊偏移錯(cuò)位問題
最近在可視化項(xiàng)目中使用 css3 transform:scale()
封裝了一個(gè)組件 讓頁面縮小或者放大自適應(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()
縮放后會(huì)導(dǎo)致高德地圖的點(diǎn)位點(diǎn)擊的時(shí)候會(huì)出現(xiàn) 點(diǎn)位偏移 錯(cuò)位的情況 找了很多方法 最后用 iframe
解決了
把地圖單獨(dú)封裝一個(gè)組件 拿 iframe
去引入這個(gè)組件
? ? <iframe ? ? ? ?className="map_iframe" ? ? ? ?width="808px" ? ? ? ?height="953px" ? ? ? ?src={`http://${window.location.host}/maprouter`} ? ? ? ?frameBorder="0"
到此這篇關(guān)于解決頁面整體使用transform scale后高德地圖點(diǎn)位點(diǎn)擊偏移錯(cuò)位問題的文章就介紹到這了,更多相關(guān)面整體使用transform scale內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信小程序組件化開發(fā)的實(shí)戰(zhàn)步驟
雖然小程序在剛推出時(shí)是不支持組件化的,但如今小程序開始支持自定義組件開發(fā),下面這篇文章主要給大家介紹了關(guān)于微信小程序組件化開發(fā)的相關(guān)資料,需要的朋友可以參考下2022-09-09document.getElementById為空或不是對(duì)象的解決方法
document.getElementById為空或不是對(duì)象的解決方法,一般情況下注意先內(nèi)容后js.2010-01-01JS之延時(shí)器和定時(shí)器執(zhí)行示例詳解
這篇文章主要為大家介紹了JS之延時(shí)器和定時(shí)器執(zhí)行示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07js實(shí)現(xiàn)網(wǎng)頁抽獎(jiǎng)實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)網(wǎng)頁抽獎(jiǎng)的方法,實(shí)例分析了javascript隨機(jī)數(shù)及時(shí)間函數(shù)的相關(guān)使用技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-08-08layui表格 列自動(dòng)適應(yīng)大小失效的解決方法
今天小編就為大家分享一篇layui表格 列自動(dòng)適應(yīng)大小失效的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09小程序:授權(quán)、登錄、session_key、unionId的詳解
這篇文章主要介紹了小程序:授權(quán)、登錄、session_key、unionId的詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05微信小程序基于picker實(shí)現(xiàn)級(jí)聯(lián)菜單
這篇文章主要為大家詳細(xì)介紹了微信小程序基于picker實(shí)現(xiàn)級(jí)聯(lián)菜單,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-02-02如何用JavaScript學(xué)習(xí)算法復(fù)雜度
這篇文章主要介紹了如何用JavaScript學(xué)習(xí)算法復(fù)雜度,對(duì)算法感興趣的同學(xué),一定要看一下2021-04-04