Shulou(Shulou.com)06/02 Report--

How to solve the problem of map point click offset dislocation after the overall use of transform scale on the page, I believe that many inexperienced people are at a loss about this. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

Recently, css3 transform:scale () was used in the visualization project to encapsulate a component to make the page shrink or enlarge the adaptive screen.

Js file:

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 (' current scale', scale);}, [scale]); return ({children}) }

Css file:

.scale-box {position: absolute; top: 0; left: 50%; transform-origin: 0; transition: 0.3s;}

Then found that the use of transform:scale () zoom will lead to Amap's point position when clicking will occur point offset dislocation situation, found a lot of ways to solve the problem with iframe

Encapsulate a separate component of the map and use iframe to introduce this component

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.